Google Maps Geometry Library：如何创建处于拖动状态的标记

Posted 2023-05-08

【中文标题】Google Maps Geometry Library：如何创建处于拖动状态的标记

【英文标题】：Google Maps Geometry Library: how do I create a marker that is in a state of being dragged

【发布时间】：2019-01-09 08:23:21

【问题描述】：

我的意图是在 dragstart 事件中将一条折线（具有两个坐标）一分为二。

下面的代码发生了什么：

折线正在等待拖动开始 当用户开始拖动折线时，两条新的折线和它们之间的标记会替换旧的折线 拖动停止在当前鼠标位置而不释放鼠标

实际意图：

在第 3 步中，继续拖动，但拖动的元素是新的标记，而不是删除的折线。

如何将“拖动”从折线转移到标记？

const path = new google.maps.MVCArray([
  new google.maps.LatLng(0, 0),
  new google.maps.LatLng(10, 10),
])

const polyline = new google.maps.Polyline(
  map,
  path,
  draggable: true
)

let marker, newPolylineA, newPolylineB

const dragstartListener = polyline.addListener('dragstart', ( latLng ) => 
  google.maps.event.removeListener(dragstartListener)
  polyline.setMap(null)

  marker = new google.maps.Marker(
    map,
    position: latLng,
    draggable: true,
  )

  newPolylineA = new google.maps.Polyline(
    map,
    path: [ path.getAt(0), latLng ],
  )

  newPolylineB = new google.maps.Polyline(
    map,
    path: [ latLng, path.getAt(1) ],
  )
)

【问题讨论】：

为什么不添加一个可拖动的标记并将其绑定到折线的新顶点？

我正在创建新的标记并将折线绑定到它。但是由于 UX 的原因（单次点击比点击 2 次更好），我想将拖动目标从初始折线更改为新的标记。

请提供minimal reproducible example 来证明问题

【参考方案1】：

我通过使用 strokeOpacity 隐藏原始折线并使用拖动和拖动事件来解决它。

这不是拖动目标的实际交换，但它至少模仿了结果。

const coordinateA = new google.maps.LatLng(0, 0)
const coordinateB = new google.maps.LatLng(10, 10)
const path = new google.maps.MVCArray([
  coordinateA,
  coordinateB,
])

const polyline = new google.maps.Polyline(
  map,
  path,
  draggable: true
)

let marker, newPolylineA, newPolylineB

const dragstartListener = polyline.addListener('dragstart', ( latLng ) => 
  polyline.setOptions(
    strokeOpacity: 0
  )

  marker = new google.maps.Marker(
    map,
    position: latLng,
    draggable: true,
  )

  newPolylineA = new google.maps.Polyline(
    map,
    path: [ path.getAt(0), latLng ],
  )

  newPolylineB = new google.maps.Polyline(
    map,
    path: [ latLng, path.getAt(1) ],
  )

  google.maps.event.removeListener(dragstartListener)
)

const dragListener = polyline.addListener('drag', ( latLng ) => 
  marker.setPosition(latLng)  
  newPolylineA.setPath([ coordinateA, latLng ])
  newPolylineB.setPath([ latLng, coordinateB ])
)

const dragendListener = polyline.addListener('dragend', ( latLng ) => 
  google.maps.event.removeListener(dragendListener)
  google.maps.event.removeListener(dragListener)

  marker.setPosition(latLng)  
  newPolylineA.setPath([ coordinateA, latLng ])
  newPolylineB.setPath([ latLng, coordinateB ])

  polyline.setMap(null)
)