百度地图API引用方式

1、直接通过http/https方式引用API js库，如下

             <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=b32lBo1C2DnpzToMuT1URU79KV5Fl80K"></script>    其中ak=b32lBo1C2DnpzToMuT1URU79KV5Fl80K 为你在百度地图官网注册账号时生成的key
             <script type="text/javascript" src="https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
             <script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

2、把百度地图API js库下载到本地调用，下载js库也分http和https版本，

       如下载https版本：在浏览器中访问如下三个链接地址，把返回的内容copy出来在本地保存成对应的js文件，如要修改源码，需要对copy出来的js文件进行解压。

下载地址如下：

 https://api.map.baidu.com/api?v=2.0&ak=b32lB**C2DnpzToMuT1URU79KV5Fl8**                

 其中ak=b32lB**C2DnpzToMuT1URU79KV5Fl8*为在百度地图官网注册账号时生成的key

 https://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js

 https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js

  引入方式代码如下：

      <script type="text/javascript" src="plugins/baidumap/mapkey-1.js"></script>    //百度地图生成的KEY文件内容和请求方式（http/https）
   <script type="text/javascript" src="plugins/baidumap/texticon-overlay.js"></script>         //其他API
    <script type="text/javascript" src="plugins/baidumap/marker-clusterer.js"></script>       //该js文件主要是聚合点处理逻辑API

3、百度地图开放平台及相关页面链接

1）百度地图开放平台：http://lbsyun.baidu.com/

2）web开发API：http://lbsyun.baidu.com/index.php?title=jspopular3.0

3）demo地址：http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

4）web JavaScript API v3.0 :http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html

4、地图初始化示例

 <div id="map" style="height: 100%;width: 100%;margin-left: 0px;">   

 var map=new BMap.Map("map");// 创建地图实例;

 var markers= [];

 markers.push(new BMap.Marker(point));

 var markerClusterer= new BMapLib.MarkerClusterer(map);

 markerClusterer.addMarkers(this.markers);

 map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
 map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
 map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
 map.addControl(new BMap.OverviewMapControl({isOpen: true, anchor:    

BMAP_ANCHOR_BOTTOM_RIGHT})); //右下角，打开
 map.setMaxZoom(18);
 convertor = new BMap.Convertor();
 markerClusterer = new BMapLib.MarkerClusterer(map);
 map.addEventListener("zoomend",(e)=> {

   //地图更改缩放级别结束时触发触发此事件
   this.markerClustererEvent();
 });
  map.addEventListener("moveend",(e)=> {

  //地图移动结束时触发此事件
   this.markerClustererEvent();
 });

//聚合点点击事件处理逻辑
 markerClustererEvent(){
     for(var i=0;i<this.markerClusterer._clusters.length;i++){
          let currentCluster=this.markerClusterer._clusters[i];

          currentCluster._clusterMarker.addEventListener("click",(ev)=> {

                 // 每个聚合点的点击事件

   }

})

}