web guide map to obtain the screen viewing angle coordinate, implement load only the visible area of the screen to move the marker when reloading other points

var refresh;

was 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();
                 }
            }
            
        });

      // the zoom level end =============

refresh = function(){

// get the coordinates of the visual range of the screen, to draw a rectangle

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 coordinate array [name, [latitude, longitude], offset angle] 


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);
                    }

                }

}

End // map pan ============= the begin
       AMap.event.addListener (TMAP, 'the MoveEnd', function () {

       //tmap.clearMap (); // delete all will be added

          tmap.remove (markerArr); // delete only the marker point group

       Refresh (); 
       });
     // map panning end 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());
    }

Guess you like

Origin blog.csdn.net/zhu_nana/article/details/80063757