Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?

0 votes
305 views
in Technique[技术] by (71.8m points)

javascript - Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?

I'm trying to get all markers within a given radius (google.maps.Circle) by using google.maps.geometry.poly.containsLocation as recommended here, but I get an error: TypeError: e is undefined.

Snippet:

// ...
if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
    console.log('=> is in searchArea');
} else {
    console.log('=> is NOT in searchArea');
}
// ...

Full code:

<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
  }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
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());

        // find markers in area
        for (var i = 0; i < randomMarkers.length; i++) {
            console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition()); 

            // ---------- Here comes the error: 
            // TypeError: e is undefined
            if (google.maps.geometry.poly.containsLocation(randomMarkers[i].marker.getPosition(), searchArea)) {
                console.log('=> is in searchArea');
            } else {
                console.log('=> is NOT in searchArea');
            }
        }
    });
}

google.maps.event.addDomListener(window, 'load', init);
</script>


See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

containsLocation is a method on google.maps.Polygon objects not google.maps.Circle objects

To determine if a marker is within a circle 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');
}

working fiddle

working code snippet:

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<iwArray.length; i++) {
      iwArray[i].close();
    }
    iwArray = [];
    // find markers in area
    for (var i = 0; i < randomMarkers.length; i++) {
      console.log('Marker: ' + randomMarkers[i].marker.title + ', position: ' + randomMarkers[i].marker.getPosition());
      console.log("marker["+i+"] posn="+randomMarkers[i].marker.getPosition().toUrlValue(6));
      if (google.maps.geometry.spherical.computeDistanceBetween(randomMarkers[i].marker.getPosition(), searchArea.getCenter()) <= searchArea.getRadius()) {
        console.log('=> is in searchArea');
        var iw = new google.maps.InfoWindow();
        iw.setContent("is in searchArea");
        iw.open(map, randomMarkers[i].marker);
        iwArray.push(iw);
      } else {
        console.log('=> 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
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...