Javascript 如何触发谷歌地图的“启动”'；绘图经理'；绘画
在我基于谷歌地图的应用程序中，用户通常需要在地图上画一对同心圆。我使用的是Javascript 如何触发谷歌地图的“启动”'；绘图经理'；绘画,javascript,google-maps,google-maps-api-3,eventtrigger,Javascript,Google Maps,Google Maps Api 3,Eventtrigger,在我基于谷歌地图的应用程序中，用户通常需要在地图上画一对同心圆。我使用的是google.maps.drawing.DrawingManager。在理想情况下，用户正常绘制第一个圆，然后绘制第二个圆的过程自动开始，其中心已设置。因此，用户只需再单击一次即可绘制第二个圆 以下是我尝试过的： var manager = new google.maps.drawing.DrawingManager({ map: myMap, drawingControlOptions: {
google.maps.drawing.DrawingManagervar manager = new google.maps.drawing.DrawingManager({
map: myMap,
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
}
});
var phaseOne = true;
google.maps.event.addListener(manager, 'circlecomplete', function (circle) {
if (phaseOne) {
phaseOne = false;
// already in drawing mode, so... just trigger a click event?
google.maps.event.trigger(myMap, 'click', {
stop: null,
latLng: circle.getCenter()
});
} else {
phaseOne = true;
}
}
phaseOne有什么想法或建议吗？我终于成功了！正如TravJenkins所说，在绘图模式下，所有事件都被禁用，我尝试使用GoogleAPI，但找不到方法。我认真地认为绘图库可以大大改进 我决定模拟单击事件，保存上一次单击的坐标 我所要做的就是在一个圆绘制时影响两个变量进行检测，另一个变量在第二个点停止以防止无限绘制 代码如下：
var draw = false
var already = false
var event
$('#map').click(function (e) {
if (draw === true && already === false) {
already = true;
click(event.clientX, event.clientY);
draw = false;
} else if (draw === false) {
event = e;
already = false;
}
draw = false
})
function click (x, y) {
var ev = document.createEvent('MouseEvent')
var el = document.elementFromPoint(x, y)
ev.initMouseEvent(
'click', true, true, window, null, 0, 0,
x, y,
false, false, false, false, 0, null
)
el.dispatchEvent(ev)
}
google.maps.event.addDomListener(manager, 'circlecomplete', function (circle) {
draw = true
})
希望google.maps团队能够添加一些方法，允许开发人员从代码中绘制一些覆盖图，或者至少将新的覆盖图附加到
DrawingManager<!DOCTYPE html>
<html>
<head>
<title>Handling markers collection demo</title>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0;
padding: 0;
}
#map-container
{
height: 100%;
width: 100%;
min-width:500px;
min-height:300px;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
</head>
<body>
<div id="map-container"></div>
<script type="text/javascript">
var _map,
manager;
$(document).ready(function () {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
_map = new google.maps.Map($("#map-container")[0], mapOptions);
manager = new google.maps.drawing.DrawingManager({
map: _map,
drawingControlOptions: {
drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
}
});
google.maps.event.addListener(manager, 'circlecomplete', function (circle) {
var center = circle.getCenter(), radius = circle.getRadius();
manager.setDrawingMode(null);
var circleOptions = {
center: center,
editable: true,
map: _map,
radius: radius * 0.80,
visible: true
},
newCircle = new google.maps.Circle(circleOptions);
google.maps.event.addListener(newCircle, 'center_changed', function () {
var oldCenter = center,
newCenter = newCircle.getCenter();
if (oldCenter.lat() != newCenter.lat() && oldCenter.lng() != newCenter.lng()) {
newCircle.setCenter(center);
}
});
google.maps.event.addListener(newCircle, 'radius_changed', function () {
newCircle.setEditable(false);
});
});
});
</script>
</body>
</html>
处理标记收集演示
html
{
身高：100%；
}
身体
{
身高：100%；
保证金：0；
填充：0；
}
#地图容器
{
身高：100%；
宽度：100%；
最小宽度：500px；
最小高度：300px；
}
var_图，
经理
$（文档）.ready（函数（）{
变量映射选项={
缩放：4，
中心：新google.maps.LatLng（-34.397150.644），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
_map=new google.maps.map（$（“#映射容器”）[0]，mapOptions）；
manager=新建google.maps.drawing.DrawingManager({
地图：_地图，
drawingControlOptions：{
drawingModes:[google.maps.drawing.OverlayType.CIRCLE]
}
});
google.maps.event.addListener（管理器，'circlecomplete'，函数（圆圈）{
var center=circle.getCenter（），radius=circle.getRadius（）；
manager.setDrawingMode（空）；
变量循环次数={
中心:中心,，
是的，
地图：_地图，
半径：半径*0.80，
可见：正确
},
newCircle=newgoogle.maps.Circle（circleOptions）；
google.maps.event.addListener（newCircle，'center\u changed'，函数（）{
var oldCenter=中心，
newCenter=newCircle.getCenter（）；
if（oldCenter.lat（）！=newCenter.lat（）&&oldCenter.lng（）！=newCenter.lng（））{
newCircle.setCenter（中心）；
}
});
google.maps.event.addListener（newCircle，'radius\u changed'，函数（）{
newCircle.setEditable（false）；
});
});
});
此代码可用，并在此运行无解决方案。。。但我开始胡思乱想添加第二个可编辑的圆。我想那盏灯能让你靠近。基本上弹出鼠标所在的圆圈，停止绘图模式，然后开始调整新圆圈的大小。但我不知道这是否有效。虽然我在谷歌的网站上看到典型的点击事件在绘图模式下被禁用（在底部）。[我已经自动放置了第二个可编辑的圆圈作为“下一个最好的东西”。但是在非绘图模式下模拟单击事件来调整其大小是非常聪明的！我还没有尝试过。：-）尽管如此，我感觉我仍然可以触发编辑模式单击。如果不是通过Google Maps API，那么是通过常规DOM事件吗？但是到目前为止还没有成功。在JSFIDDLEOUNING中发布整个示例会很有用！：-）我很快会仔细看一看。只是一句简短的评论：初始圆也可以由mousedown drag mouseup绘制，您似乎还没有捕捉到。但是，好吧，这只是这一点的一个细节。是的，我决定这样做是因为您只谈论点击帖子中的事件和评论。让我知道！：）你的代码的一个问题是它使用本机浏览器事件，而不是像jQuery这样的东西。不知怎么回事，我很难将这个jQuery化……你觉得怎么样？我会看到它，但是对你来说，使用javascript而不是jQuery真的是个问题吗？jQuery是首选的原因rable是因为它是跨浏览器兼容的。像
elementFromPointinitMouseEvent