• WEB使用百度地图展示某地地址

    第一步 进入百度地图开发平台 

    百度地图开放平台 | 百度地图API SDK | 地图开发

     第二步注册 获取AK秘钥，点击【创建应用】进入AK申请页面，填写应用名称，务必选择AK类型为“浏览器端”，JS API只支持浏览器端AK进行请求与访问

     下面的这个就是AK秘钥

    第三步 就是在HTML文件中创建一个div元素，用于显示地图。

    第四步 在JS文件中编写代码，调用百度地图API的相关函数，实现地图的展示和标注。

    下面这个就是在页面中引用申请的秘钥

        

     效果图

    页面代码如下：

    1. <!DOCTYPE html>
    2. <html lang="zh-CN">
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <title>获取信息窗口内容</title>
    7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    8.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    9.     <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    10.     <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script>
    11. </head>
    12.  
    13. <body>
    14.     <div id="Map" style="width: 600px;height: 500px;"></div>
    15. </body>
    16.  
    17. </html>
    18. <script>
    19.     var map = new BMapGL.Map('Map');// 创建Map实例
    20.     var point = new BMapGL.Point(116.404, 39.915); // 初始化地图,设置中心点坐标和地图级别
    21.     map.centerAndZoom(point, 15);
    22.     var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    23.     map.addControl(scaleCtrl);
    24.     var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    25.     map.addControl(zoomCtrl);
    26.     // 创建点标记
    27.     var marker = new BMapGL.Marker(point);
    28.     map.addOverlay(marker);
    29.     // 创建信息窗口
    30.     var opts = {
    31.         width: 200,
    32.         height: 100,
    33.         title: '故宫博物院'
    34.     };
    35.     var infoWindow = new BMapGL.InfoWindow('地址：北京市东城区王府井大街88号乐天银泰百货八层', opts);
    36.     map.openInfoWindow(infoWindow, point); // 开启信息窗口
    37.     function getInfoContent() {
    38.         alert(infoWindow.getContent());
    39.     }
    40.  
    41.     var map = new AMap.Map('allmap', {
    42.         zoom: 14,
    43.         zoomEnable: true,
    44.         scrollWheel: false,
    45.         center: [113.360435, 23.101970],
    46.         lang: "zh_cn" //可选值：en，zh_en, zh_cn
    47.     });
    48.  
    49. </script>

    百度地图 地址经纬度拾取地址如下链接:

    拾取坐标系统

    还有个好用的这个百度地图生成工具 不过这个版本比较低会提示你：您所使用的地图JS API版本过低，已不再维护，为保证地图基本功能正常使用，请尽快升级到 最新版

       创建地图-百度地图生成器

  • 相关阅读:
    秋招入职阿里腾讯大厂，阿里淘系内传322页“Java并发编程核心讲义”学习笔记，轻松拿下大厂offer
    16. 从零开始编写一个类nginx工具, 反向代理upstream源码实现
    tomcat 7 任意文件上传漏洞（信息搜集与漏洞探测）
    hbuilderx创建、运行uni-app
    set/ multiset 容器
    Linux常用分析命令
    Linux服务器管理入门
    七夕邂逅爱，那人一定在
    C# U2Net Portrait 跨界肖像画
    Mysql数据库中的用户管理与授权
  • 原文地址：https://blog.csdn.net/LQZ8888/article/details/134076610