Javascript 在谷歌地图上画圆时如何知道半径

我所拥有的：

根据谷歌的建议，我们使用MVC对象和事件

DistanceWidget

和

RadiusWidget

来显示半径，同时重新调整圆的大小，这对现有圆（由DistanceWidget绘制的圆）来说效果良好

我需要什么：

我需要在绘制新圆时显示圆的半径。事件

DistanceWidget

和

RadiusWidget

仅用于现有圆（由

DistanceWidget

绘制的圆），而不用于新圆（用户使用DrawingManager工具绘制的圆）

是否可以显示DistanceWidget以创建新的圆圈

---

这的确是一个不错的挑战。正如@DaveAlperovich所评论的，您不能使用

DrawingManager

检索这段信息；绘制时，您无法访问圆；您必须等待

DrawingManager

触发

circlecomplete

事件以获取对该圆圈的引用

尽管如此，如果你没有一个真正的经理，那就假装吧。 请参阅下面的代码片段和描述

var FakeDrawer=函数（controlDiv，map）{
var self=这个；
/*初始化，一些样式*/
自映射=映射；
self.initControls（controlDiv）；
/*设置圆形控件的单击事件侦听器：drawingmode*/
google.maps.event.addDomListener（self.\u controls.circle，'click'，function（）{
/*确保一致性*/
self.reset（）；
/*绑定图形模式*/
self.\u map.setOptions({
拖动光标：“十字线”
});
self.\u drawListener=self.\u map.addListener（'mousedown'，self.drawingMode（self））；
});
/*只需重新设置停止控制*/
google.maps.event.addDomListener（self.\u controls.stop，'click'，function（）{
self.reset（）；
});
};
FakeDrawer.prototype.drawingMode=函数（自身）{
返回功能（中心）{
/*让我们在绘图时冻结地图*/
self.\u map.setOptions({
可拖动：错误
});
/*创建将手动缩放的新圆*/
var circle=new google.maps.circle({
填充颜色：'#000'，
填充不透明度：0.3，
冲程重量：2，
可点击：false，
可编辑：false，
映射：self.\u映射，
半径：1，
center:center.latLng，
zIndex:1
});
/*在每次鼠标移动时更新半径*/
var onMouseMove=self.\u map.addListener（'mousemove'，函数（边框）{
var半径=1000*点之间的自距离（中心线、边框线）；
圆。设定半径（半径）；
/*这是特征，在绘图时知道半径*/
google.maps.event.trigger（self，'drawing\u radius\u changed'，circle）；
});
/*用户已完成其绘图*/
google.maps.event.addListenerOnce（self.\u map，'mouseup'，function（）{
/*删除所有侦听器，因为不再需要它们*/
google.maps.event.removeListener（onMouseMove）；
circle.setEditable（true）；
/*恢复一些选项以保持一致的行为*/
self.reset（）；
/*用最后一个圆圈通知听众*/
google.maps.event.trigger（self，'circlecomplete'，circle）；
});
};
};
FakeDrawer.prototype.reset=函数（）{
var self=这个；
self.\u map.setOptions({
可拖动光标：“”，
可拖动：“真的”
});
/*删除任何应用的侦听器*/
如果（自我）{
google.maps.event.RemovelListener（self.\u drawListener）；
}
};
/*创建视图和关联的css*/
FakeDrawer.prototype.initControls=函数（controlDiv）{
var self=这个；
函数createControlUI（标题、图像）{
var controlUI=document.createElement（'div'）；
controlUI.style.backgroundColor='#fff'；
controlUI.style.border='1px实心rgba（0,0,0,15）'；
controlUI.style.boxShadow='14px-1px rgba（0,0,0,3）'；
controlUI.style.marginTop='10px'；
controlUI.style.textAlign='center'；
controlUI.style.width='25px'；
controlUI.style.height='25px'；
controlUI.style.display='inline block'；
controlUI.title=标题；
如果（图像==“圆”）{
controlUI.style.borderLeft=“无”；
}
var controlImgWrapper=document.createElement（'div'）；
controlImgWrapper.style.width='16px'；
controlImgWrapper.style.height='16px'；
controlImgWrapper.style.overflow='hidden'；
controlImgWrapper.style.display='inline block'；
controlImgWrapper.style.marginTop='4px'；
controlUI.appendChild（controlImgWrapper）；
var imageOffset={
“圆”：0，
“张开的手”：-9*16
}[图片]；
var controlImg=document.createElement（'img'）；
controlImg.src=https://maps.gstatic.com/mapfiles/drawing.png';
controlImg.style.marginTop=imageOffset+“px”；
controlImgWrapper.appendChild（controlImg）；
var focusBackground=函数（）{
controlUI.style.backgroundColor='#eee'；
};
var unfocusBackground=函数（）{
controlUI.style.backgroundColor=“#fff”；
};
controlImg.addEventListener（'mouseenter'，focusBackground）；
controlImg.addEventListener（“鼠标出”，无焦点背景）；
controlUI.addEventListener（'mouseenter'，focusBackground）；
controlUI.addEventListener（“鼠标出”，无焦点背景）；
返回控制界面；
}
自我控制={
圆：createControlUI（“绘制圆”、“圆”），
停止：createControlUI（“停止绘制”、“openhand”），
};
controlDiv.appendChild（self.\u controls.stop）；
controlDiv.appendChild（self.\u controls.circle）；
};
FakeDrawer.prototype.distanceBetweenPoints=函数（p1，p2）{
如果（！p1 | |！p2）{
返回0；
}
var R=6371；
var dLat=（p2.lat（）-p1.lat（））*Math.PI/180；
var dLon=（p2.lng（）-p1.lng（））*Math.PI/180；
var a=Math.sin（dLat/2）*Math.sin（dLat/2）+Math.cos（p1.lat（）*Math.PI/180）*Math.cos（p2.lat（）*Math.PI/