web 高德地图 获取屏幕可视角坐标,实现只加载可视区的marker 屏幕移动的时候再加载其他点

var refresh;

var markerArr=[];

var  tmap = new AMap.Map('container', {

            center: [114.513018,37.894788],
            zoom: 13,
            resizeEnable: true

        });


//缩放级别begin=============
        AMap.event.addListener(tmap,'zoomend',function(){
            var sfjb = tmap.getZoom();
            if (sfjb < 13) {
                for (var i = 0; i < markerArr.length; i += 1) {
                    markerArr[i].hide();
                }
            }else{
            for (var i = 0; i < markerArr.length; i += 1) {
                     markerArr[i].show();
                 }
            }
            
        });

      //缩放级别end=============

refresh = function(){

//得到屏幕可视范围的坐标,画出矩形

var tmapBounds = tmap.getBounds();
    var southWest = new AMap.LngLat(tmapBounds.southwest.lng, tmapBounds.southwest.lat);
    var northEast = new AMap.LngLat(tmapBounds.northeast.lng, tmapBounds.northeast.lat);


    var bounds = new AMap.Bounds(southWest, northEast)
    var rectangle = new AMap.Rectangle({
          map: tmap,
          bounds: bounds,
          strokeColor:'#FFFFFF',
          strokeWeight:1,
          strokeOpacity:0,
          fillOpacity:0,
          zIndex:0,
          bubble:true

        });

//lineArr 坐标array [名称,[经度,纬度],偏移角度] 


for (var i = 0,marker,txtmarker; i < lineArr.length; i++) {
                    var markername = lineArr[i][0];
                    var markerAngle = lineArr[i][2];
                    var markerContent = markername;
                     var myLngLat=new AMap.LngLat(lineArr[i][1][0],lineArr[i][1][1]);
                      if(rectangle.contains(myLngLat) && tmap.getZoom() > 13){//如果点在矩形内则输出
                    marker = new AMap.Marker({
                            position: lineArr[i][1],
                            map: tmap,
                            icon: new AMap.Icon({            
                                image: xhjIcon+'2.png',
                                imageSize: new AMap.Size(12,23)
                            }),
                            title:markerContent,
                            zooms:[15,18],
                            angle:markerAngle,//旋转角度
                            offset: new AMap.Pixel(0, 0) 
                        });
                    marker.content = markerContent;
                    marker.on('click', markerClick);
                    markerArr.push(marker);
                   
                    txtmarker = new AMap.Text({
                            text:markerContent,
                            title:markerContent,
                            map: tmap,
                            textAlign:'left', 
                            verticalAlign:'middle',
                            draggable:true,
                            cursor:'pointer',
                            style:{
                                'background-color':'#f4f4f4',
                                'border':'solid 1px #DFDFDF',
                                'padding':'1px 2px',
                                'font-size':'12px'
                            },
                            position: lineArr[i][1],
                            offset: new AMap.Pixel(0, 0)  
                        });
                    txtmarker.content = markerContent;
                    txtmarker.on('click', markerClick);
                    markerArr.push(txtmarker);
                    }

                }

}

//地图平移结束begin=============
       AMap.event.addListener(tmap,'moveend',function(){

       //tmap.clearMap(); //所有加的都会删除

          tmap.remove(markerArr); //只删除marker点组

       refresh(); 
       });
     //地图平移结束end=============

function markerClick(e) {
    infoWindow.close();
        var info = [];
        info.push('<span class="dianji">marker点  点击</span>');
        infoWindow = new AMap.InfoWindow({
        offset: new AMap.Pixel(0, 0),
            content:  info.join('<br>') 
        });
        infoWindow.open(tmap, e.target.getPosition());
    }

猜你喜欢

转载自blog.csdn.net/zhu_nana/article/details/80063757