Introduction to the

When using Baidu map, we need to add Marker on the map to display setting information. With the increasing needs of users, loading more Marker marking information becomes a luxury. However, through the improvement of their own technology, come down to the following scheme.

Introduction of Baidu Map

Need to be in baidu http://lbsyun.baidu.com/index.php?title=jspopular is registered as a developer. This process skips…

<head>

< script type = "text/javascript" SRC = "http://api.map.baidu.com/api?v=2.0&ak= you apply for the key" > < / script >

</head>Copy the code

In the page HTML <head> to introduce baidu provided s

Instantiation map

Create a div in the body

<body> <div id="allmap" style="height: 550px;" ></div> <script type="text/javascript">//Baidu Map API function
            var map = new BMap.Map("allmap", { enableMapClick: false });//Instantiate Baidu Map
            map.centerAndZoom(newBMap. Point (116.404, 39.915), 5);//Sets the center point and zoom level
            map.enableScrollWheelZoom();//To enable scrolling
    </script>
</body>Copy the code

This opens the HTML page to see the introduction of Baidu Map.

Create a Marker in the map

//Baidu Map API function
var map = new BMap.Map("allmap", { enableMapClick: false });//Instantiate Baidu Map
map.centerAndZoom(newBMap. Point (116.404, 39.915), 5);//Sets the center point and zoom level
map.enableScrollWheelZoom();//To enable scrolling
var pt = null.//point
    i = 0,//
    mark=null;//The new labels
for(; i < 10; i++) { pt= new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//Random instance Point
    mark=new BMap.Marker(pt);//Instance marker
    map.addOverlay(mark);//Add to the map
};Copy the code

There will now be 10markers on the map

Drag and zoom events for the map binding

//Map binding drag event
map.addEventListener('dragend', function(e){ console.log('Drag event');
});
//Map binding scroll events
map.addEventListener('zoomend', function(e){ console.log('Zoom event');
});Copy the code

This allows the data marker to be loaded when the map is scaled or dragged

Get visual area

Get the viewable area and display maker data based on the current viewable area. This avoids unnecessary marker display.

var bounds =  map.getBounds(),   //Get visual area
SouthWest = bounds.getSouthWest(),   //Lower left corner of viewable area
NorthEast = bounds.getNorthEast();   //Upper right corner of viewable areaConsole. log(" current map visibility is: "+ SouthWest. LNG + "," + SouthWest. Lat +" to "+ NorthEast NorthEast.lat);            Copy the code

When obtaining the data we request again, judge whether the current marker exists, if so, do not add. That would increase the speed a lot.

The final case

<! DOCTYPE HTML > < HTML > <head> <meta charset="UTF-8"> <title>marker SRC = "http://api.map.baidu.com/api?v=2.0&ak=E06eb9d756d0eafc722effb355657b4c" > < / script > < / head > < body > < div id = "allmap" style="height: 550px;" ></div> <p id='conunt'></p> <script type="text/javascript">//Baidu Map API function
            var map = new BMap.Map("allmap", { enableMapClick: false });//Instantiate Baidu Map
            map.centerAndZoom(newBMap. Point (116.404, 39.915), 5);//Sets the center point and zoom level
            map.enableScrollWheelZoom();//To enable scrolling
            
            var markers = [];//Annotation set of all markers
            
            //console.log(markers);

            //Map binding drag event
            map.addEventListener('dragend', function(e){ getBounds('dragend'); });//Map binding scroll events
            map.addEventListener('zoomend', function(e){ getBounds('zoomend'); });/ ** * Get visual area * @type {string} type ** /
            function getBounds(type){
                //Function of the throttle
                if(getBounds.timer){ clearTimeout(getBounds.timer); getBounds.timer=null; } getBounds.timer=setTimeout(function() {//If the value exceeds 2000, it is not loaded
                    if(markers.length>=1000) {}else{ addMarker(100);//Load 500 markers
                    }
                    var bounds =  map.getBounds(),   //Get visual area
                    SouthWest = bounds.getSouthWest(),   //Lower left corner of viewable area
                    NorthEast = bounds.getNorthEast();   //Upper right corner of viewable areaConsole. log(" current map visibility is: "+ SouthWest. LNG + "," + SouthWest. Lat +" to "+ NorthEast NorthEast.lat);
                    //Handles show and hide markers
                    var data=boundsShow(SouthWest.lng,NorthEast.lng,SouthWest.lat,NorthEast.lat);
                    
                    //Hide makers that are not in the visible area
                    for(vari=0,lengths=data.listhide.length; i<lengths; i++){ data.listhide[i].hide(); } dom.innerTextData.listshow. length =' data.listshow.length ';//Set the number of markers on the map}, 200,); }/ ** * displays in the visible area, Not hiding in visible area * @smLNG {number} small longitude * @bglng {number} large longitude * @smlat {number} small latitude * @bglat {number} large latitude * * return Returns the number shown and the number hidden ** /
            function boundsShow(smlng,bglng,smlat,bglat){
                var listhide=[],//Hidden data
                    listshow=[];//Displayed data
                for(vari=0,lengths=markers.length; i<lengths; i++) {var _point=markers[i].point;
                    //If the longitude of marker is less than the maximum longitude of the visible range is greater than the minimum longitude of the visible range --
                    //And the latitude of marker is less than but the maximum latitude of the range is greater than the minimum latitude of the visual range -- then it needs to be displayed
                    if(smlng<_point.lng && _point.lng<bglng && smlat<_point.lat && _point.lat < bglat){
                        //According to
                        listshow.push(markers[i]);
                        //Display if previously hidden
                        if(!markers[i].isVisible()){ markers[i].show(); }}else{
                        //Don't show
listhide.push(markers[i]); }}//Returns the number shown versus the number hidden
                return{ listshow:listshow, listhide:listhide } }/ ** * Add marker * @max {number} number ** /
            functionaddMarker(MAX){ dliags(true,' loading... ');
            
                var pt = null.//point
                    i = 0,//
                    mark=null;//The new labels
                for(; i < MAX; i++) { pt= new BMap.Point(Math.random() * 40 + 85, Math.random() * 30 + 21);//Random instance Point
                    mark=new BMap.Marker(pt);//Instance marker
                    map.addOverlay(mark);//Add to the map
                    markers.push(mark);//Store it in an array
                };
                //Wait for the rendering engine to finish rendering before clearing the pop-up layer
                setTimeout(function(){ dliags(false); },0); }/ *@state {Boolean} true: display or false: hide * @txt {string} display text ** /
            function dliag(){
                var dom=null;
                return function(state,txt){
                    var dlog=null,p=null;
                    //If true, the value is displayed
                    if(state){
                        if(dom){ document.body.appendChild(dom); }else{ p=document.createElement('p'); p.innerText=txt; p.style.width='100px'; p.style.height='45px'; p.style.textAlign='center'; p.style.position='absolute'; p.style.margin='auto'; p.style.zIndex= '2'; p.style.left= '0'; p.style.right= '0'; p.style.bottom= '0'; p.style.top= '0'; p.style.backgroundColor='#F2F2F2'; p.style.lineHeight='45px'; p.style.borderRadius='5px'; dlog=document.createElement('div'); dlog.style.position='absolute'; dlog.style.zIndex= '1'; dlog.style.margin='auto'; dlog.style.left= '0'; dlog.style.right= '0'; dlog.style.bottom= '0'; dlog.style.top= '0'; dlog.style.backgroundColor# = '000'; dlog.style.opacity= '0.6'; dom=document.createElement('div'); dom.appendChild(dlog); dom.appendChild(p); document.body.appendChild(dom); }}else{ document.body.removeChild(dom); }}}//pop-up
            var dliags=dliag();
            //Add a marker
            addMarker(100);
            //Get conunt
            var dom=document.getElementById('conunt');
            //Set the number of displaysDom.innertext =' shared: '+markers. Length +markers.length;
        </script>
    </body>
</html>Copy the code

Reference link Demo

conclusion

When using Baidu map, sometimes will be limited by Baidu map but we can optimize only JS, can let the map less rendering browser less drawing, will improve the performance to the maximum

Code is an amazing thing, and we can drive it to do so many things. Why don’t we just be a controller!!





Tip author channel ↓↓↓

If you think this article is good! Click on the recommendation to support oh!!