将标记针保持在中心我会拖动地图[重复]答案

【问题标题】：Keep Marker Pin in center will I drag map [duplicate]将标记针保持在中心我会拖动地图[重复]
【发布时间】：2019-10-30 20:44:49
【问题描述】：

我正在构建一个使用 IONIC 框架的谷歌地图 API 的用例。

在页面中显示地图并在位置（纬度，lng）中使用标记图钉后，我需要允许用户拖动地图，保持图钉固定，以便他们可以在拖动停止时查明他们的地址需要获取点的纬度，语言并获取点的地址并在UI中显示。我怎样才能做到这一点？

以下是我用来显示带有 PIN 码的地图的代码。

  ngAfterContentInit(): void {

this.map = new google.maps.Map(
  this.mapNativeElement.nativeElement,
  {
    center: { lat: 17.455841, lng: 78.335507 },
    zoom: 16,
    disableDefaultUI: true
  }
);

this.marker = new google.maps.Marker(
  {
    map: this.map,
    draggable: true,
    animation: google.maps.Animation.DROP,
    position: { lat: 17.455841, lng: 78.335507 }
  });

【问题讨论】：

标签： angular google-maps-api-3 ionic4

【解决方案1】：

你可以试试这个：

this.marker = new google.maps.Marker(
{
  map: this.map,
  draggable: true,
  animation: google.maps.Animation.DROP,
  position: { lat: 17.455841, lng: 78.335507 }
});

google.maps.event.addListener(myMarker, 'dragend', () => {
    this.map.setCenter(this.map.getPosition()); 
});

google.maps.event.addListener(map, 'drag', function () {
    myMarker.setPosition(this.getCenter()); 
});

google.maps.event.addListener(map, 'dragend', function () {
    myMarker.setPosition(this.getCenter()); 
});

您可以查看this了解更多信息。

【讨论】：

【解决方案2】：

虽然前面的答案是正确的并且可以完成工作，但问题仍然存在，因为谷歌地图标记（有时快速移动）不一定会到达地图的中心。

在进一步的研究中，我发现实现此用例的更好解决方案是在 div 的中心保留一个单独的标记，并在需要时使用 map.getCenter() 获取位置。

这样，唯一要添加的事件侦听器将是 dragend。

google.maps.event.addListener(map, 'dragend', (function () {
        var l = map.getCenter();
        //marker.setPosition(l);
        console.log("get center", l);
        this.updatePosition(l.lat(), l.lng());
      }).bind(this));
    }

#map {
  height: 60%;
  position: relative;
}

#map:after {
  width: 44px;
  height: 50px;
  display: block;
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -40px 0 0 -11px;
  background: url("../../assets/icon/pin.png");
  background-size: 44px 50px;

}

专业提示：您也可以使用 gif 代替 png。让地图来了活着。

【讨论】：