Javascript 如何在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 
});

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

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] + "<br>" + 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);

---

您只需定义

半径

和

位置

变量，例如：

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

对于缩放，可以使用

map.setZoom（），将其添加到
setCenter
之后，例如：

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



代码片段：


var center=“立陶宛维尔纽斯”；
变量位置=[
['Tuskulėnųg.20，维尔纽斯09211，立陶宛'，“一些信息”]，
['Stumbrųg.21，立陶宛维尔纽斯08101'，“更多信息”]，
['Kalvarijųg.55，立陶宛维尔纽斯09317'，“诸如此类”，
['Birželio 23 iosios g.6，立陶宛维尔纽斯03204'，“其他信息”]，
['Teatro g.6，立陶宛维尔纽斯03107'，“待定”]
];
var地理编码器；
var映射；
var infoWin=new google.maps.InfoWindow（）；
功能代码地址（位置，i）{
地理编码({
“地址”：位置[0]
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
map.setZoom（5）；
var marker=new google.maps.marker({
地图：地图，
标题：“标记”+i，
位置：结果[0]。几何体。位置
});
google.maps.event.addListener（标记，'click'，函数（evt）{
infoWin.setContent（位置[0]+“
”+位置[1]）；
打开（地图，这个）；
})
var半径=1000；
var position=marker.getPosition（）；
var circle=new google.maps.circle({
中锋:位置,，
半径：半径，
fillColor:#0000FF“，
填充不透明度：0.1，
地图：地图，
strokeColor:#FFFFFF“，
笔划不透明度：0.1，
冲程重量：2
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
}
google.maps.event.addDomListener（窗口，“加载”，函数（）{
geocoder=新的google.maps.geocoder（）；
map=新建google.maps.map(
getElementById（“地图画布”）；
//在“中心”地址上居中并缩放地图
地理编码({
地址：中心
}，功能（结果、状态）{
if（status==google.maps.GeocoderStatus.OK）{
google.maps.event.addListenerOnce（映射'bounds_changed'，函数（）{
map.setZoom（map.getZoom（）+3）；
});
map.fitBounds（结果[0].geometry.bounds）；
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
});
对于（变量i=0；i
html，
身体，
#地图画布{
身高：100%；
宽度：100%；
}

我看不到有人试图在张贴的代码中添加圆圈（或是小提琴）。你尝试了什么不起作用？@geocodezip嗨，我在最后一个
}之前添加了代码块，否则{
会在
的循环中，我仍然在发布的代码中看不到它。只需添加它并适当地调整变量，对我来说就行了，你有javascript错误吗（如
位置
未定义，
半径
未定义）？@geocodezip我已经更新了我的问题，并添加了我从控制台得到的信息。
半径没有定义
你尝试定义半径了吗？嘿，真的很感谢你，但我想使用位置名称，而不是latlng。要在所有标记周围画一个圆圈，而不是一般的圆圈……不客气，请检查我更新的答案（也更新了fiddle）。我接受了你的回答，非常感谢，这真的很有帮助。在第22行，就在
map:map
的下方，我添加了
zoom:5
但没有Lucky欢迎你，通常你应该将它添加到
map=new google.maps.map（document.getElementById（“map\u canvas”），{zoom:20}）
。嗨，你能帮我使用缩放功能吗？
map.setCenter(results[0].geometry.location);
map.setZoom(5);