谷歌地图 api v3 中折线顶点的鼠标移动事件答案

【问题标题】：Mouse move event for polyline vertex in google maps api v3谷歌地图 api v3 中折线顶点的鼠标移动事件
【发布时间】：2014-01-07 00:00:33
【问题描述】：

当我在可编辑的多段线上移动顶点时，我想显示一个信息窗口。此信息将显示到多段线上前一个顶点的距离和航向。当我放下顶点时，信息窗口必须关闭。问题是折线在顶点上没有拖动事件。我将尝试使用折线的 mousemove，但它在移动完成后被触发。在接下来的代码中，我展示了我所说的一个例子。我有一条折线（flightPath）。如果我点击最后一个顶点，我想同时移动一个标记。但它不起作用。标记在移动完成后移动。

google.maps.event.addListener(flightPath, 'mousemove', function (event) {
   if (typeof event.vertex === "undefined") {
        moveline = 0
   }
   else {
       if (event.vertex == (flightPath.getPath().getLength()-1)) {
            var path = flightPath.getPath();
            marker.setPosition(path.getAt(event.vertex));
       }
   }
});

有什么建议吗？

注意：我的折线是可编辑的。

谢谢

【问题讨论】：

bind the marker position to the vertex's position
感谢您的回答，但它不能按我的意愿工作。在发布这个问题之前，我尝试使用谷歌地图示例link 将标记绑定到顶点，但我的折线是可编辑的 = true。然后我可以移动一个顶点而不移动标记，尽管它们是绑定的。

标签： google-maps-api-3 polyline google-polyline

【解决方案1】：

您可以管理标记上的拖动结束事件并更改顶点的 de latLng：

google.maps.event.addListener(marker, 'dragend', function(evt){

var vertex = marker.get('vertex');

var path = flightPath.getPath();

var newPath = Array.prototype.slice.call(path).filter(
function(element, index){
    return index < vertex;
}).concat([evt.latLng],
Array.prototype.slice.call(path).filter(
function(element, index){
    return index > vertex;
}));
flightPath.setPath(newPath);


});

对不起，我的英语不好，但我希望它有所帮助。

【讨论】：