我发现了这个演示,我正在使用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>I found this demo which I am working with from geocodezip. When a user inputs a city or zip, etc., it populates a sidebar with the results in that specified radius. However, there are items being populated in the sidebar which are outside of the indicated radius. More interesting enough, the markers that are actually in the radius show up just fine in the shaded circle. The extra markers that show up in the sidebar are not marked on the map itself.
I am really confused on how to remove these outside markers from the sidebar without impacting the current functionality.
Thank you for any and all help.
<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>最满意答案
侧边栏显示地图边界上的标记,而不是圆圈中的标记:
现有的“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);注释掉那一行。 我在原始示例中做了,现在可以按预期工作。
The sidebar is displaying the markers on the map bounds, rather than those in the circle:
Existing "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; }The code creates the correct sidebar in the codeAddress function then calls makeSidebar, which overwrites it. That code is:
// 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;The sidebar is overwritten with the markers in bounds here:
google.maps.event.addListenerOnce(map, 'bounds_changed', makeSidebar);Comment out that line. I did in the original example, which now works as you expect.
更多推荐
发布评论