javascript - google maps load only markers in the displayed area - Stack Overflow

admin管理员组

文章数量:1402949

I'm using google maps for a web site development. There are a lot of markers in my database. I want to load markers that are in the area that is shown in the current map. And when the zooming changes the number of markers should also adjust accordingly. What's the best approach? Thanks in advance!

I'm using google maps for a web site development. There are a lot of markers in my database. I want to load markers that are in the area that is shown in the current map. And when the zooming changes the number of markers should also adjust accordingly. What's the best approach? Thanks in advance!

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked Jun 11, 2016 at 16:00 Danuja JayawardhanaDanuja Jayawardhana 3311 silver badge44 bronze badges 1

• Why would you need to remove a marker if it's not in view? I think you need to explain the end goal of this. – DBS Commented Jun 11, 2016 at 16:31

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use the bound

    aNord   =   this.map.getBounds().getNorthEast().lat();  
    aEst    =   this.map.getBounds().getNorthEast().lng();
    aSud    =   this.map.getBounds().getSouthWest().lat();  
    aOvest  =   this.map.getBounds().getSouthWest().lng();  

for filter (server side ) data from database (in this case php)

 "select lat, lng 
  from your_table 
  where lat >= $minLat 
  AND lat <= $maxLat
  AND lng <= $maxLng
  AND lng >= $minLng";

You can also use bounds_changed function to add or remove data when user changes zoom level or pan the map.

var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 12,
      center: {lat:41.082774, lng: 28.86821},
      disableDefaultUI: true
    });

    google.maps.event.addListener(map, 'bounds_changed', function() {
    aNord   =   map.getBounds().getNorthEast().lat();  
    aEst    =   map.getBounds().getNorthEast().lng();
    aSud    =   map.getBounds().getSouthWest().lat();  
    aOvest  =   map.getBounds().getSouthWest().lng();  
    });

本文标签： javascriptgoogle maps load only markers in the displayed areaStack Overflow