zoukankan      html  css  js  c++  java
  • Java web与web gis学习笔记(二)——百度地图API调用

    系列链接:
    Java web与web gis学习笔记(一)——Tomcat环境搭建
    Java web与web gis学习笔记(二)——百度地图API调用
    JavaWeb和WebGIS学习笔记(三)——GeoServer 发布shp数据地图


    一.申请百度地图开发者

    百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能,适用于PC端、移动端、服务器等多种设备,多种操作系统下的地图应用开发

    ---------百度百科

    开发web应用需要用到的是百度地图提供的JavaScript API。百度地图的JavaScript API是一套由JavaScript语言编写的应用程序接口,可以很方便地实现我们需要的地图功能。使用API我们需要注册百度账号,并认证成为开发者。

    image-20200303111736772

    1.注册并登陆百度账号

    登录百度地图开放平台

    2.根据自己的需要认证开发者

    在百度地图开放平台->控制台找到"开发者认证",根据需要填写资料,认证开发者
    image-20200303113158232

    3.获取密钥(AK)

    在控制台中找到"我的应用",创建应用,选择应用类型为“浏览器端”,Referer白名单填写*即可

    创建完毕就可以看到刚刚申请的AK了!

    二.调用百度地图API

    关于百度地图JavaScript API的使用,官方文档给出了详细的使用说明和示例,关于地图的展示、控件的添加、定位等功能的实现方法都比较清晰了,需要用到什么功能直接查询文档即可。当然,文档示例不可避免存在一些问题,需要自己在实际应用中甄别。
    image-20200303120905997

    在使用时将图中圈出的位置替换成自己刚刚生成的AK就可以引入百度地图的JS脚本啦,这里给出一个简单的Demo,通过浏览器打开就可以看效果(将密钥替换为自己的密钥噢)。

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="initial-scale=1, user-scalable=no" />
        <style type="text/css">
            body, html{ 100%;height: 100%;margin:0;font-family:"微软雅黑";}
            #allmap{height:600px;1000px;}
        </style>
        <!-- 设置你的百度地图ak -->
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>  
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script> 
        <title>百度地图显示</title>
    </head>
    <body>
        <div id="allmap" ></div>
        <input type="button" onclick="$('#allmap').toggle();" value="隐藏/显示百度地图"/> 
        <input type="button" onclick="setCenter()" value="显示武汉大学"/> 
    </body>
    </html>
    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        // 创建地图对象
        var map = new BMap.Map("allmap");
        // 初始化地图,用城市名设置地图中心点,显示比例级别
        
        map.centerAndZoom("武汉",15);
        //鼠标滚动缩放
        map.enableScrollWheelZoom(true);
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl());          
        function setCenter(){
            var point = new BMap.Point(114.372519,30.540647);   //根据坐标创建点
            map.centerAndZoom(point,16);    //用点坐标设置地图中心并显示比例级别
        }
    </script>
    

    image-20200303133409180

  • 相关阅读:
    浅谈三层架构
    尺度空间(Scale space)理论
    漫游Kafka实现篇之消息和日志
    杭电 2095
    .net调用Outlook 批量发送邮件,可指定Outlook中的账号来发送邮件
    Java实现 蓝桥杯VIP 算法提高 计算时间
    Java实现 蓝桥杯VIP 算法提高 计算时间
    Java实现 蓝桥杯VIP 算法提高 计算时间
    Java实现 蓝桥杯VIP 算法提高 计算时间
    Java实现 蓝桥杯VIP 算法提高 最小乘积(提高型)
  • 原文地址:https://www.cnblogs.com/ssjxx98/p/12401981.html
Copyright © 2011-2022 走看看