创建百度地图标注（多个）

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

　　function getNearbySite(lng, lat) {
            $.ajax({
                url: ``,
                method: 'get',
                data: {  },
                success: function (res) {
                    // console.log(res)
                    //获取站点x,y    
                    res.stations.forEach((ele, index) => {
                        var obj = {}
                        obj.x = ele.longitude
                        obj.y = ele.latitude
                        pointArr.push(obj)
                        var points = new BMap.Point(pointArr[index].x, pointArr[index].y);//创建坐标点
                        markerFun(points, index, ele.type);

                    })
                },
                dataType: 'json'
            })
        }


　　function markerFun(points, i, type) {

            var label
            var icon = new BMap.Icon("./images/map_04.png",new BMap.Size(30,30));  //自定义标注
            var markers = new BMap.Marker(points, { icon: icon });
            label = new BMap.Label(i, { offset: new BMap.Size(5, 5) }); //创建标记,修改label样式,（可以用来存放需要传递的数据
            label.setStyle({ background: "none", color: '#fff'});//对label 样式隐藏    
            markers.setLabel(label);  //把label设置到maker上 
            //点击标注触发click事件
            markers.addEventListener('click', function (e) {
                $("#id").html(e.target.getTitle()); //这里就可以获取到marker的id       
            });
            map.addOverlay(markers);   //将标注添加到地图中
        }    

　　

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

        　　　　var pointArr = []   //暂存经纬度
        　　　　res.stations.forEach((ele, index) => {
                        var obj = {}
                        obj.x = ele.longitude
                        obj.y = ele.latitude
                        pointArr.push(obj)
                        //根据数组创建海量点
                        
                        if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
                            var points = [] 
                            points.push(new BMap.Point(pointArr[index].x, pointArr[index].y));
                            var options = {
                                shape: BMAP_POINT_SHAPE_WATERDROP,    //标注点形状
                                color:'#0f0',
                                SizeType: BMAP_POINT_SIZE_HUGE
                            }
                            var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                            map.addOverlay(pointCollection);  // 添加Overlay
                            pointCollection.addEventListener('click', function (e) {
                                alert('q')
                            });

                        } else {
                            alert('请用chrome、safari、IE8+以上浏览器查看');
                        }
                        
                    })        

　　

转载于:https://www.cnblogs.com/xhrr/p/11233694.html