Google Maps JS API v3: obtener marcadores en círculo con containsLocation () no funciona, ¿por qué?

Nuestros programadores estrellas han agotado sus depósitos de café, investigando todo el tiempo por la solución, hasta que Abraham encontró la contestación en GitHub así que en este momento la compartimos contigo.

Solución:

containsLocation es un método en objetos google.maps.Polygon, no en objetos google.maps.Circle

Para determinar si un marcador está dentro de un círculo, use google.maps.geometry.spherical.computeDistanceBetween

if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) 
    console.log('=> is in searchArea');
 else 
    console.log('=> is NOT in searchArea');

violín de trabajo

fragmento de código de trabajo:

var map,
  searchArea,
  searchAreaMarker,
  searchAreaRadius = 1000, // metres
  startLat = 40.782827,
  startLng = -73.966167;

function init() 
  var startLatLng = new google.maps.LatLng(startLat, startLng);

  map = new google.maps.Map(document.getElementById('map-canvas'), 
    center: startLatLng,
    zoom: 12
  );

  searchArea = new google.maps.Circle(
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.2,
    map: map,
    center: startLatLng,
    radius: searchAreaRadius
  );

  searchAreaMarker = new google.maps.Marker(
    position: startLatLng,
    map: map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    title: 'searchAreaMarker'
  );

  var randomMarkers = [
    title: 'Marker 1',
    latLng: new google.maps.LatLng(40.770088, -73.971146)
  , 
    title: 'Marker 2',
    latLng: new google.maps.LatLng(40.782048, -73.972691)
  , 
    title: 'Marker 3',
    latLng: new google.maps.LatLng(40.769048, -73.987797)
  , 
    title: 'Marker 4',
    latLng: new google.maps.LatLng(40.773858, -73.956211)
  , 
    title: 'Marker 5',
    latLng: new google.maps.LatLng(40.800372, -73.952091)
  , 
    title: 'Marker 6',
    latLng: new google.maps.LatLng(40.804661, -73.939388)
  ];

  for (var i = 0; i < randomMarkers.length; i++) 
    randomMarkers[i].marker = new google.maps.Marker(
      position: randomMarkers[i].latLng,
      map: map,
      title: randomMarkers[i].title
    );
  

  google.maps.event.addListener(searchAreaMarker, 'dragend', function(e) 
    startLatLng = e.latLng;

    searchArea.setOptions(
      center: startLatLng
    );

    map.panTo(searchAreaMarker.getPosition());
    findMarkersInArea();
  );
  var iwArray = [];
  function findMarkersInArea() 
    // close open infowindows
    for (var i=0; i is NOT in searchArea');
        var iw = new google.maps.InfoWindow();
        iw.setContent("outside searchArea");
        iw.open(map, randomMarkers[i].marker);
        iwArray.push(iw);
      
    
  
  // initial config
  findMarkersInArea();


google.maps.event.addDomListener(window, 'load', init);

html,
body,
#map-canvas 
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px

Reseñas y calificaciones del artículo

---

---

Utiliza Nuestro Buscador