zoukankan      html  css  js  c++  java
  • 创建百度地图标注(多个)

    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+以上浏览器查看');
                            }
                            
                        })        
    

      

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

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

      

  • 相关阅读:
    网页Tab控件
    ivy在eclipse中的重新加载
    es删除文档或者删除索引
    es修改数据
    es中插入数据
    创建es索引-格式化和非格式化
    MySQL常用字符串函数
    python各种类型转换
    python 3.4读取输入参数
    python异常捕获异常堆栈输出
  • 原文地址:https://www.cnblogs.com/xhrr/p/11233694.html
Copyright © 2011-2022 走看看