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

      

  • 相关阅读:
    SpringMVC的入门示例
    [PTA] 数据结构与算法题目集 6-1 单链表逆转
    [PTA] L3-015 球队“食物链”
    [PTA] 1001. 害死人不偿命的(3n+1)猜想 (Basic)
    [PTA] 1002. 写出这个数 (Basic)
    [opengl] 画一个可移动的自行车 二维几何变换(平移、旋转、缩放)
    css inline-block 水平居中
    css 图片裁剪显示
    [leetcode] 19. Remove Nth Node From End of List (Medium)
    [leetcode] 20. Valid Parentheses (easy)
  • 原文地址:https://www.cnblogs.com/xhrr/p/11233694.html
Copyright © 2011-2022 走看看