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

  • 相关阅读:
    Laravel 初始化
    ant design pro 左上角 logo 修改
    请求到服务端后是怎么处理的
    Websocket 知识点
    王道数据结构 (7) KMP 算法
    王道数据结构 (6) 简单的模式匹配算法
    王道数据结构 (4) 单链表 删除节点
    王道数据结构 (3) 单链表 插入节点
    王道数据结构 (2) 单链表 尾插法
    王道数据结构 (1) 单链表 头插法
  • 原文地址:https://www.cnblogs.com/ssjxx98/p/12401981.html
Copyright © 2011-2022 走看看