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半径搜索仅限制为圈内的标记？

1 个答案: