Javascript 如何在google map api中围绕给定半径的标记绘制圆

我在谷歌地图api的帮助下创建了地图。我想在给定公里的标记周围画一个圆圈。输入仅由用户提供。我需要一个文本框，一个用于指定地点，另一个用于指定公里和一个按钮。 我确实在单击搜索按钮时为给定位置放置了标记。但是，我不知道如何在标记周围画圆圈

请任何人帮帮我

这是我的代码：

简单标记
html，正文，#地图画布
{
身高：100%；
边际：0px；
填充：0px
}
.控制
{
边缘顶部：16px；
边框：1px实心透明；
边界半径：2px 0 0 2px；
框大小：边框框；
-moz框大小：边框框；
高度：32px；
大纲：无；
盒影：0 2px 6px rgba（0,0,0,0.3）；
背景色：#fff；
填充：0 11px 0 13px；
宽度：400px；
字体系列：Roboto；
字体大小：15px；
字体大小：300；
文本溢出：省略号；
}
#类型选择器
{
颜色：#fff；
背景色：#4d90fe；
填充：5px11px 0px 11px；
}
#类型选择器标签
{
字体系列：Roboto；
字体大小：13px；
字体大小：300；
}
var映射；
函数初始化（）{
var mylatng=newgoogle.maps.LatLng（13.083980.2700）；
变量映射选项={
缩放：7，
中心：myLatlng
}
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
自动完成（）；
}
var自动完成；
var标记；
函数自动完成（）{
var source=document.getElementById（'start'）；
autocomplete=newgoogle.maps.places.autocomplete（源代码）；
autocomplete.bindTo（'bounds'，map）；
marker=新的google.maps.marker({
地图：地图，
主播点：新google.maps.Point（0，-29）
});
}
函数calcRoute（）{
marker.setVisible（假）；
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
警告（“自动完成的返回位置不包含几何体”）；
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
if（place.geometry.viewport）{
map.fitBounds（place.geometry.viewport）；
}否则{
地图。设置中心（地点。几何。位置）；
map.setZoom（17）；//为什么是17？因为它看起来不错。
}
标记器.设置位置（位置.几何.位置）；
marker.setVisible（true）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
搜索：

您可以使用谷歌地图API中的选项，如下所示-

var circleRadius = ($('#radius').val()*1000);
if(geoCircle) {  //If the circle is already created and visible on map.
    geoCircle.setRadius(circleRadius);
    geoCircle.setCenter(marker.getPosition());
} else {    //Circle not initalized yet, so initialize and display.
    var circleOptions = {
        strokeColor: 'blue',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: 'blue',
        fillOpacity: 0.35,
        map: map, //pass the map object to show on the map.
        center: marker.getPosition(), //or you can pass a google.maps.LatLng object
        radius:parseInt(circleRadius) //radius of the circle in metres
    };
    geoCircle = new google.maps.Circle(geoCircleOptions);
}

编辑：在

calcRoute

函数外定义

geocycle

变量，然后将上述代码添加到

calcRoute（）

函数的

标记后。setVisible（true）行。我已更新代码，从
#radius
字段中获取半径值

希望这有帮助
 简单的方法是使用google.maps.geometry.spherical命名空间中的
计算偏移量（from:LatLng，distance:number，heading:number，radius？：number）
函数，请参阅

然后绘制一条具有中心的多段线，绘制一个半径为该偏移的法向圆代码
 这对我不起作用。。。如何在我的代码中应用上述代码我这样写var circleOptions=new google.maps.Circle({strokeColor:'blue'，strokeOpacity:0.8，strokeWeight:2，fillColor:'blue'，fillOpacity:0.35，map:map，//传递要在地图上显示的地图对象。中心：marker.getPosition（），//或者您可以传递一个google.maps.LatLng对象radius:radius*1000//圆的半径（以米为单位）；，但不能刷新圆。。要刷新圆，需要在
calcRoute（）外部定义
geocycle
变量
函数，然后只需执行
geocycle=new google.maps.Circle（geoccircleoptions）；
@hikoo更新了我的答案。请立即检查。