Take a look at GW

【百度地图】浅析如何使用百度地图

目录结构：

contents structure [+]

 

概述

读者在使用百度地图API之前，需要申请一个密钥，读者可以点击这里阅读百度地图JavaScript API的详细教程。

百度地图JavaScript API语法

web开发的语法就是javaScript。

百度地图javaScript 类参考

点击我阅读百度地图JavaScript API 类参考。

一个简单的地图Demo

复制代码
<!DOCTYPE html>
<html>
  <head>
    <title>demo</title>
    
        <meta name="content-type" content="text/html; charset=UTF-8">
        <!-- In order to better support the mobile terminal -->
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <!-- reference baidu map api js -->
    <script src="http://api.map.baidu.com/api?v=2.0&ak=UfuZjklxjf6BmZvIIdW9c5hjDGvtO9bw"></script>
    
  </head>
  <body>
  <!-- must set width and height -->
  <div id="container" style="width:70%;height:400px"></div>
  <script>
    //create map
    var map=new BMap.Map("container");
    
    //initialize map
    var point1=new BMap.Point(104.074091,30.665783);
    map.centerAndZoom(point1,12);
    
    //add marker on map
    var point2=new BMap.Point(104.158603,30.642172);
    var marker=new BMap.Marker(point2);
    map.addOverlay(marker);
    
    //addPanoramaConverageLayer on map
    var pclyer=new BMap.PanoramaCoverageLayer();
    map.addTileLayer(pclyer);
    
    //add panoramaControl on map
    var pnrm=new BMap.PanoramaControl();
    map.addControl(pnrm);
    
    //add overviewControl on map
    var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});
    map.addControl(overviewControl);    
  </script>
  </body>
</html>
复制代码

 

总结

  1. 自己的密钥可以在API控制台查看。
  2. BMap是作为整JavaScript API的命名空间，所有的JavaScript API类都必需在前面加上“BMap.”，要引用javaScript API之外的类就需要用别的命名空间。
  3. 在头部添加 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    是为了能够更好地支持移动端。

  4. JavaScript API中的类大部分都有监听事件，因此可以通过addEventListener()来监听: 
    map.addEventListener("click",function(e){
  console.log(e.point.lng+","+e.point.lat);
});
  5. addEventListener()中的函数参数可以有以下几种属性：工具类就是对API的补充和扩展，工具类自1.2版本搬移到API之外实现，详见MapLibrary。
    1. e.point.lng
    2. e.point.lat
    3. e.pixel.x
    4. e.pixel.y
    5. e.bounds
    6. e.size
    7. 也适用于JavaScript里的事件属性
  6. 用户数据图层多用于LBS云开发，详见LBS云。
  7. 如果一个构造函数或是函数的参数用方括号“[]”括起来的，就表示该参数为可选参数。
  8. 如果一个构造韩式或是函数的参数是另一个类，就应该通过构造函数声明对象来表示。
  9. 如果一个构造函数或是函数的参数是另一个类，但是该类没有构造函数，可以通过对象字面量的形势表示。那么参数的语法应该和JSON的语法一致的。比如：
    复制代码
      <script>
  /*
   Panorama的构造函数：
     Panorama(container:String|HTMLElement[, PanoramaOptions])
   PanoramaOptionis的构造函数：
             此类为Panorama类构造函数的可选参数，使用对象字面量形式表示，不可实例化。
  */
  var acops={
    anchor:BMAP_ANCHOR_TOP_RIGHT
  }
  var pos={
    navigationControl:true,
    albumsControl:true,
    albumsControlOptions:acops
  }
  //create panorama
  var panorama=new BMap.Panorama("container",pos);
  //set position
  panorama.setPosition(new BMap.Point(120.320032, 31.589666));
  </script>
    复制代码
  10. 如果对于某些的类的构造情况不清楚，可以通过一段代码反映远端类的构造的大致情况，详见获取未知类的结构。
  11. 使用百度地图删除左下角的百度版权logo会涉及侵权，详见使用百度地图常见问题。

参考文章

 

本文为博主原创文章，若需转载请注明出处。

posted @   HDWK  阅读(1185)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示