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()//创建新的标注之前先删除旧的
    

      

  • 相关阅读:
    hdu 1863 畅通工程(Kruskal+并查集)
    1.1.2最小生成树(Kruskal和Prim算法)
    1.1.1最短路(Floyd、Dijstra、BellmanFord)
    ACM复习专项
    装饰器和偏函数
    Python函数基础
    (六)面向对象高级编程
    Zabbix漏洞利用 CVE-2016-10134
    Struts-S2-045漏洞利用
    F5 BIG-IP 远程代码执行漏洞环境搭建
  • 原文地址:https://www.cnblogs.com/xhrr/p/11233694.html
Copyright © 2011-2022 走看看