Javascript 谷歌地图绘制——通过拖动绘制直线或多边形

当前，可以通过单击在地图上绘制多边形或多段线，从而创建节点。然而，如果您想跟随河流或海岸线等特征，这可能既单调又不准确

有人知道一种方法可以通过单击拖动鼠标，或者单击开始，然后拖动路径，然后单击停止来绘制路径吗

我已经看过DrawingManager和MouseeEvent，但我还没有看到任何有希望的东西

有没有一种方法可以根据事件（如单击和鼠标移动）连接图形

这将允许更准确、更快速的功能。

可能的工作流程：

onmousedown

在地图上将地图的

draggable

-选项设置为

false

，创建一个

Polyline

-实例，并将

Polyline

的

clickable

-选项设置为

false

观察地图的

mousemove

-事件，每次它发生时，将返回的

LatLng

推到

多段线的路径上

onmouseup

删除映射的

mousemove

-侦听器，并将映射的

draggable

-选项设置回

true

。您的

多段线

已完成

如果不想创建

多边形

，请立即创建

多边形

-实例，将

多边形

的路径设置为

多段线

的路径，然后删除

多段线

---

： 建议只使用鼠标右键进行绘制，否则地图将永远无法绘制

演示：

代码片段：（来自链接的JSFIDLE）

函数初始化（）{
变量映射选项={
缩放：14，
中心：新google.maps.LatLng（52.5498783,13.4252090999961），
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（'map_canvas'），
地图选项）；
google.maps.event.addDomListener（map.getDiv（），'mousedown'，函数（e）{
//只需使用鼠标右键即可
如果（e.按钮！=2）返回；
//多边形
poly=新的google.maps.Polyline({
地图：地图，
可点击：false
});
//移动侦听器
var move=google.maps.event.addListener（映射'mousemove'，函数（e）{
poly.getPath（）.push（如latLng）；
});
//鼠标侦听器
google.maps.event.addListenerOnce（映射，'mouseup'，函数（e）{
google.maps.event.removeListener（move）；
if（document.getElementById（'overlay'）。值=='Polygon'）{
var path=poly.getPath（）；
poly.setMap（空）；
poly=新的google.maps.Polygon({
地图：地图，
路径：路径
});
}
});
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体{
身高：100%；
保证金：0
}
#地图画布{
身高：90%；
}

使用鼠标右键绘制覆盖图


多段线
多边形
@“Molle博士”，您为什么从来没有提供过真正的解决方案？这背后有什么哲学吗？在这种情况下，我会给出一个具体的IRL例子，而不是配方。我不认为他的解决方案是坏的。它能让我把事情想清楚。不过，有一个问题是，在绘图库中，有一个注释：“请注意，在地图上绘图时，google.maps.Map事件（如click和mousemove）被禁用。”我是否只使用浏览器事件侦听器？我需要使用谷歌地图的监听器来获取坐标，对吗？是的，你需要地图监听器。你不需要绘图库来实现它。@davidkonrad：你怎么了？这个解决方案有什么不真实的地方？因此，它既不是代码交付服务，也不是留下无保留评论的平台。这是一个编程社区。@Dr.Molle，在这种情况下，您很幸运地回答了一个能够理解的OP。因此，这不仅仅是为了帮助那些已经拥有巨大编程技能的人。这就是帮助人们，你必须在他们自己的层面上帮助他们，这样他们才能变得更好，甚至可能更上一层楼。所以，这并不是通过复制粘贴手册或泛型来帮助人们，即使那些拥有最多代表性的人的代表来自引用手册。但我喜欢你的答案，有时候我只是觉得你可以做得比引用链接、融合或类似链接更好。我来这里是为了帮助人们成为一个更好的程序员