1. 循环遍历创建标注（如果标注过多会造成浏览器卡顿状态，可以采用创建海量标注方式）

  1. 　　function getNearbySite(lng, lat) {
  2.             $.ajax({
  3.                 url: ``,
  4.                 method: \'get\',
  5.                 data: {  },
  6.                 success: function (res) {
  7.                     // console.log(res)
  8.                     //获取站点x,y    
  9.                     res.stations.forEach((ele, index) => {
  10.                         var obj = {}
  11.                         obj.x = ele.longitude
  12.                         obj.y = ele.latitude
  13.                         pointArr.push(obj)
  14.                         var points = new BMap.Point(pointArr[index].x, pointArr[index].y);//创建坐标点
  15.                         markerFun(points, index, ele.type);
  16.  
  17.                     })
  18.                 },
  19.                 dataType: \'json\'
  20.             })
  21.         }
  22.  
  23.  
  24. 　　function markerFun(points, i, type) {
  25.  
  26.             var label
  27.             var icon = new BMap.Icon("./images/map_04.png",new BMap.Size(30,30));  //自定义标注
  28.             var markers = new BMap.Marker(points, { icon: icon });
  29.             label = new BMap.Label(i, { offset: new BMap.Size(5, 5) }); //创建标记,修改label样式,（可以用来存放需要传递的数据
  30.             label.setStyle({ background: "none", color: \'#fff\'});//对label 样式隐藏    
  31.             markers.setLabel(label);  //把label设置到maker上 
  32.             //点击标注触发click事件
  33.             markers.addEventListener(\'click\', function (e) {
  34.                 $("#id").html(e.target.getTitle()); //这里就可以获取到marker的id       
  35.             });
  36.             map.addOverlay(markers);   //将标注添加到地图中
  37.         }

　　

2. 创建海量标注点（海量标注点不可以自定义标注样式）

  1.         　　　　var pointArr = []   //暂存经纬度
  2.         　　　　res.stations.forEach((ele, index) => {
  3.                         var obj = {}
  4.                         obj.x = ele.longitude
  5.                         obj.y = ele.latitude
  6.                         pointArr.push(obj)
  7.                         //根据数组创建海量点
  8.                         
  9.                         if (document.createElement(\'canvas\').getContext) {  // 判断当前浏览器是否支持绘制海量点
  10.                             var points = [] 
  11.                             points.push(new BMap.Point(pointArr[index].x, pointArr[index].y));
  12.                             var options = {
  13.                                 shape: BMAP_POINT_SHAPE_WATERDROP,    //标注点形状
  14.                                 color:\'#0f0\',
  15.                                 SizeType: BMAP_POINT_SIZE_HUGE
  16.                             }
  17.                             var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
  18.                             map.addOverlay(pointCollection);  // 添加Overlay
  19.                             pointCollection.addEventListener(\'click\', function (e) {
  20.                                 alert(\'q\')
  21.                             });
  22.  
  23.                         } else {
  24.                             alert(\'请用chrome、safari、IE8+以上浏览器查看\');
  25.                         }
  26.                         
  27.                     })

　　

 

在切换类型的时候，需要删除之前类型创建的标注重新渲染

  1. map.clearOverlays()//创建新的标注之前先删除旧的

　　

版权声明：本文为xhrr原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/xhrr/p/11233694.html