如何在Google Maps API上添加标记周围的圆圈

这是我用来在谷歌地图中的几个地方显示标记的代码。 我想补充一点，并在标记周围添加一个5公里的圆圈。

我试着添加这段代码而没有运气：

var circle = new google.maps.Circle({ center:position, radius: radius, fillColor: "#0000FF", fillOpacity: 0.1, map: map, strokeColor: "#FFFFFF", strokeOpacity: 0.1, strokeWeight: 2 }); 

这是下面的完整代码，这里有一个jsfiddle供参考

 var center = "Vilnius, Lithuania"; var locations = [ ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"], ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"], ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"], ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"], ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"] ]; var geocoder; var map; var infoWin = new google.maps.InfoWindow(); function initialize() { geocoder = new google.maps.Geocoder(); map = new google.maps.Map( document.getElementById("map_canvas")); // center and zoom map on "center" address geocoder.geocode({ address: center }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.fitBounds(results[0].geometry.bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); for (var i = 0; i < locations.length; i++) { codeAddress(locations[i], i); } } function codeAddress(location, i) { geocoder.geocode({ 'address': location[0] }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker({ map: map, title: "marker " + i, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'click', function(evt) { infoWin.setContent(location[0] + "
" + location[1]); infoWin.open(map, this); }) //i added this block var circle = new google.maps.Circle({ center:position, radius: radius, fillColor: "#0000FF", fillOpacity: 0.1, map: map, strokeColor: "#FFFFFF", strokeOpacity: 0.1, strokeWeight: 2 }); //end of block addition } else { alert("Geocode was not successful for the following reason: " + status); } }); } google.maps.event.addDomListener(window, "load", initialize); 

更新

这是我从控制台得到的

 radius is not defined 

Answer 1

您只需要定义radius和position变量，例如：

 var radius = 1000; var position = marker.getPosition(); 

对于缩放，您可以使用map.setZoom(); ，在setCenter之后添加它，例如：

 map.setCenter(results[0].geometry.location); map.setZoom(5); 

工作小提琴 。

---

代码段：

 var center = "Vilnius, Lithuania"; var locations = [ ['Tuskulėnų g. 20, Vilnius 09211, Lithuania', "some info"], ['Stumbrų g. 21, Vilnius 08101, Lithuania', "more information"], ['Kalvarijų g. 55, Vilnius 09317, Lithuania', "blah, blah"], ['Birželio 23-iosios g. 6, Vilnius 03204, Lithuania', "other information"], ['Teatro g. 6, Vilnius 03107, Lithuania', "to be determined"] ]; var geocoder; var map; var infoWin = new google.maps.InfoWindow(); function codeAddress(location, i) { geocoder.geocode({ 'address': location[0] }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { map.setCenter(results[0].geometry.location); map.setZoom(5); var marker = new google.maps.Marker({ map: map, title: "marker " + i, position: results[0].geometry.location }); google.maps.event.addListener(marker, 'click', function(evt) { infoWin.setContent(location[0] + "
" + location[1]); infoWin.open(map, this); }) var radius = 1000; var position = marker.getPosition(); var circle = new google.maps.Circle({ center: position, radius: radius, fillColor: "#0000FF", fillOpacity: 0.1, map: map, strokeColor: "#FFFFFF", strokeOpacity: 0.1, strokeWeight: 2 }); } else { alert("Geocode was not successful for the following reason: " + status); } }); } google.maps.event.addDomListener(window, "load", function() { geocoder = new google.maps.Geocoder(); map = new google.maps.Map( document.getElementById("map_canvas")); // center and zoom map on "center" address geocoder.geocode({ address: center }, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { google.maps.event.addListenerOnce(map, 'bounds_changed', function() { map.setZoom(map.getZoom() + 3); }); map.fitBounds(results[0].geometry.bounds); } else { alert("Geocode was not successful for the following reason: " + status); } }); for (var i = 0; i < locations.length; i++) { codeAddress(locations[i], i); } }); 

 html, body, #map_canvas { height: 100%; width: 100%; }