如何将 Google Maps API V3 半径搜索限制在圆圈内的标记？

Question

我从 geocodezip 找到了我正在使用的这个演示。当用户输入城市或邮政编码等时，它会在侧边栏中填充指定半径内的结果。但是，在指定半径之外的边栏中填充了一些项目。更有趣的是，实际上在半径内的标记在阴影圆圈中显示得很好。侧边栏中显示的额外标记并未标记在地图本身上。

我真的很困惑如何在不影响当前功能的情况下从边栏中删除这些外部标记。

感谢您的所有帮助。

<script type="text/javascript"> 
//<![CDATA[
      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 
    
      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 

     // global "map" variable
      var map = null;
      var circle = null;
      var geocoder = new google.maps.Geocoder();

// A function to create the marker and set up the event window function 
function createMarker(latlng, name, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        // map: map,
        title: name,
        //name: name,
        zIndex: Math.round(latlng.lat()*-100000)<<5
        });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString); 
        infowindow.open(map,marker);
        });
    // save the info we need to use later for the side_bar
    gmarkers.push(marker);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
}
 
// This function picks up the click and opens the corresponding info window
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");
}

function initialize() {
  // create the map
  var myOptions = {
    zoom: 8,
    center: new google.maps.LatLng(43.907787,-79.359741),
    mapTypeControl: true,
        scale: true,
        scaleControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);
//  google.maps.event.addListener(map, 'bounds_changed', makeSidebar);
//  google.maps.event.addListener(map, 'center_changed', makeSidebar);

  google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });

  // Read the data from example.xml
  downloadUrl("testxml.php", function(doc) {
    var xmlDoc = xmlParse(doc);
    var markers = xmlDoc.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      // obtain the attribues of each marker
      var lat = parseFloat(markers[i].getAttribute("lat"));
      var lng = parseFloat(markers[i].getAttribute("lng"));
      var point = new google.maps.LatLng(lat,lng);
      var st = markers[i].getAttribute("state");
      var loc = markers[i].getAttribute("name");      var html="<b>"+name+"</b><br>";
      // create the marker
      var marker = createMarker(point,loc+" "+st,html);
    }
    // put the assembled side_bar_html contents into the side_bar div
    document.getElementById("side_bar").innerHTML = side_bar_html;
  });
}

function makeSidebar() {
   side_bar_html = "";
   for (var i=0; i < gmarkers.length; i++){
     if (map.getBounds().contains(gmarkers[i].getPosition())) {
       // add a line to the side_bar html
       side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
     }
   }
   // put the assembled side_bar_html contents into the side_bar div
   document.getElementById("side_bar").innerHTML = side_bar_html;
}
        

      function codeAddress() {
        var address = document.getElementById('address').value;
        var radius = parseInt(document.getElementById('radius').value, 10)*1000;
        geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            side_bar_html = "";
            map.setCenter(results[0].geometry.location);
            var searchCenter = results[0].geometry.location;
            /*
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location
            });
            */
            if (circle) circle.setMap(null);
            circle = new google.maps.Circle({center:searchCenter,
                                             radius: radius,
                                             fillOpacity: 0.15,
                                             fillColor: "#FF0000",
                                             map: map});
            var bounds = new google.maps.LatLngBounds();
     var foundMarkers = 0;
            for (var i=0; i<gmarkers.length;i++) {
              if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) < radius) {
                bounds.extend(gmarkers[i].getPosition())
                gmarkers[i].setMap(map);
                // add a line to the side_bar html
                side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
  foundMarkers++;
              } else {
                gmarkers[i].setMap(null);
              }
            }
            // put the assembled side_bar_html contents into the side_bar div
            document.getElementById("side_bar").innerHTML = side_bar_html;
            if (foundMarkers > 0) {
              map.fitBounds(bounds);
     } else {
              map.fitBounds(circle.getBounds());
            }
            // makeSidebar();
            google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);

          } else {
            alert('Geocode was not successful for the following reason: ' + status);
          }
        });
      }
 
var infowindow = new google.maps.InfoWindow(
  { 
    size: new google.maps.Size(150,50)
  });
    

    // This Javascript is based on code provided by the
    // Community Church Javascript Team
    // http://www.bisphamchurch.org.uk/   
    // http://econym.org.uk/gmap/
    // from the v2 tutorial page at:
    // http://econym.org.uk/gmap/basic3.htm 
//]]>
</script>

Answer 1

侧边栏显示的是地图边界上的标记，而不是圆圈中的标记：

现有"makeSidebar"：

function makeSidebar() {
   side_bar_html = "";
   for (var i=0; i < gmarkers.length; i++){
     if (map.getBounds().contains(gmarkers[i].getPosition())) {
       // add a line to the side_bar html
       side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
     }
   }
   // put the assembled side_bar_html contents into the side_bar div
   document.getElementById("side_bar").innerHTML = side_bar_html;
}

代码在 codeAddress 函数中创建正确的侧边栏，然后调用 makeSidebar 覆盖它。该代码是：

// circle for display
circle = new google.maps.Circle({center:searchCenter,
                                 radius: radius,
                                 fillOpacity: 0.15,
                                 fillColor: "#FF0000",
                                 map: map});
var bounds = new google.maps.LatLngBounds();
var foundMarkers = 0;
for (var i=0; i<gmarkers.length;i++) {
  // if marker is in the circle, display it and add it to the sidebar
  if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),searchCenter) < radius) {
    bounds.extend(gmarkers[i].getPosition())
    // display it
    gmarkers[i].setMap(map);
    // add a line to the side_bar html
    side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].title + '<\/a><br>';
    foundMarkers++;
  } else {
    // hide the marker, it is outside the circle
    gmarkers[i].setMap(null);
  }
}
// put the assembled side_bar_html contents into the side_bar div
document.getElementById("side_bar").innerHTML = side_bar_html;

边栏被此处边界内的标记覆盖：

google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);

注释掉该行。我在 original example 中做了，现在可以正常工作了。

如何将 Google Maps API V3 半径搜索限制在圆圈内的标记？

How to restrict a Google Maps API V3 radius search only to the markers within the circle?

javascript

google-maps-api-3

google-maps-markers