将可拖动标记与折线谷歌地图绑定

Posted

技术标签:

【中文标题】将可拖动标记与折线谷歌地图绑定【英文标题】:bind draggable marker with polyline google map 【发布时间】:2020-11-10 12:05:30 【问题描述】:

您好,我在标记与折线之间有连接,例如这个 Image 。我在这里附上一个样本。

我添加了带有标记的折线。我在“点击”事件上绘制折线和标记。基本上标记带有编号的路径。我实际上想要什么 - 我能够分别编辑折线和标记,但我想将标记与折线绑定。当我拖动标记折线时,也应该用标记拖动。你可以看看我的code

【问题讨论】:

【参考方案1】:

我已经使用标记“拖动”事件解决了这个问题。在拖动事件中,我正在用新路径重绘折线。像这样。

   google.maps.event.addListener(marker, "drag", (mark) => 
      let lat = mark.latLng.lat().toString();
      let lng = mark.latLng.lng().toString();
      this.setState((state) => (
        ...state,
        lattitude: lat,
        longitude: lng,
      ));
      let newPath = polyPath;
      newPath[marker.index-1] = mark.latLng;
      poly.setMap(null);
      poly = new google.maps.Polyline(
        strokeColor: "orange",
        strokeOpacity: 1.0,
        strokeWeight: 5,
        path: newPath,
        geodesic:false,
      );
      poly.setMap(map);
  );

【讨论】:

以上是关于将可拖动标记与折线谷歌地图绑定的主要内容,如果未能解决你的问题,请参考以下文章

如何在谷歌地图的折线中点绘制标记?

居中所有标记和折线谷歌地图插件颤振适合屏幕

使用当前位置将折线绘制到目的地,并在谷歌地图上添加标记,标记颤动

如何根据沿线的距离在谷歌地图折线上添加标记?

当标记向目的地移动时减少谷歌地图中的折线(Android)

如何使用谷歌地图获取折线中的坐标?