开发者

How to get all visible markers on current zoom level

Here are some points:

  1. I have some markers on the map and records associated with it on the right panel besides the map. They are connected via numeric id, which is stored as a property of marker.
  2. All the markers are stored in an array.
  3. When the user zooms in the map, records, associated to only visible markers should be shown on the right panel.

So, how to get the list of all visible markers on the current zoom level? I've searched over the internet and didn't find something useful. Some kind of what I'm trying to achieve开发者_如何学编程 could be found here


In Google Maps JavaScript API V3 we can use something like this:

let markers
let map
const bounds = map.getBounds()
markers.filter(m => m.isAdded).forEach(m => {
  if (bounds.contains(m.getPosition())) {
    // code for showing your object, associated with current marker
  }
})


Use GMap2.getBounds() to find the bounding box. The use GLatLngBounds.containsLatLng() to check each marker to see if it is visible.


I know you wanted API V2, but i had to correct some stuff i saw in @bruha's response for V3, in case someone comes looking for it:

var markers; // your markers
var map; // your map

for(var i = markers.length, bounds = map.getBounds(); i--;) {
    if( bounds.contains(markers[i].getPosition()) ){
        // code for showing your object
    }
}

going backwards through the array this way goes through the array of markers faster, plus we set the bounds into a variable before going into the loop so we're not requesting it every time we go through the loop, and the only request we have to make is if the specific marker lies inside the bounds.

EDIT: goofed my decrementer

EDIT: map.getBounds() should be, was map.getBounds


If anyone is still needing an answer to this question, I have a complete working model on Codepen.io

Feel free to download it and tweak it for your needs. Just please change the API key to your own. (They're free)

https://codepen.io/pailwriter/pen/bGEpeRv

Here's the function to get the markers in viewport.

function showVisibleMarkers() {
    var bounds = map.getBounds(),
        count = 0;
                                   
    for (var i = 0; i < markers.length; i++) {
        var marker = markers[i],
            infoPanel = $('.info-' + (i+1) ); // array indexes start at zero, but not our class names :)
                                           
        if(bounds.contains(marker.getPosition())===true) {
            infoPanel.show();
            count++;
        }
        else {
            infoPanel.hide();
        }
    }
    
    $('#infos h2 span').html(count);
}


It's easy code. Try this code.

private boolean CheckVisibility(Marker marker)
{
    if(googleMap != null)
    {
        //This is the current user-viewable region of the map
        LatLngBounds latLongBounds = googleMap.getProjection().getVisibleRegion().latLngBounds;

            if(latLongBounds.contains(marker.getPosition()))
                   //If the item is within the the bounds of the screen
                  return true;
            else
                  //If the marker is off screen
                  return false;
    }
    return false;
}


My code snippet

private boolean isAnyMarkerVisible(LatLng ll) {
    if(gMap != null && markersData != null) {
        final LatLngBounds latLongBounds = LatLngBounds.builder().include(ll).build();
        for (Store store : markersData) {
            if (latLongBounds.contains(store.getLatLng())) {
                return true;
            }
        }
    }
    return false;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜