如何在Ionic应用中为Angular2-google-maps添加可拖拽标记

别着急，这个拖拽功能其实很容易实现，你只需要给标记组件加几个配置和事件绑定就行，我帮你修改代码并说明步骤：

首先，你需要给<sebm-google-map-marker>添加两个关键配置：

• [draggable]="true"：开启标记的拖拽权限
• (dragEnd)="onMarkerDragEnd($event)"：监听拖拽结束事件，用来获取新的坐标

然后在你的组件类里实现onMarkerDragEnd方法，把拖拽后的新坐标同步到你的map对象里，这样地图中心也会跟着更新（如果需要的话）。

修改后的模板代码： #

<sebm-google-map id="map" [latitude]="map.lat" [longitude]="map.lng" [zoom]="map.zoom" >
  <sebm-google-map-marker 
    [latitude]="map.lat" 
    [longitude]="map.lng"
    [draggable]="true"
    (dragEnd)="onMarkerDragEnd($event)"
  >
    <sebm-google-map-info-window>
      <strong>My location</strong>
    </sebm-google-map-info-window>
  </sebm-google-map-marker>
</sebm-google-map>

组件类对应的方法（TypeScript）： #

// 假设你的map对象是这样定义的
map = {
  lat: 初始纬度值,
  lng: 初始经度值,
  zoom: 12
};

// 处理标记拖拽结束的事件
onMarkerDragEnd(event: any) {
  // 获取拖拽后的新坐标
  const newLat = event.coords.lat;
  const newLng = event.coords.lng;
  
  // 更新map对象的坐标，地图中心会自动同步
  this.map.lat = newLat;
  this.map.lng = newLng;
  
  // 这里还可以添加你需要的其他逻辑，比如保存新坐标到后端等
  console.log('标记新位置：', newLat, newLng);
}

这样设置之后，你的标记就可以被拖拽到任意精确位置，拖拽结束后地图中心也会自动更新到标记的新位置，完全满足你的需求啦！

内容的提问来源于stack exchange，提问作者Syed Sammy