使用 AGM 拖动地图时如何将 Google 地图标记保持在中心？答案

【问题标题】：How to Keep Google Map Marker in the center while the map is dragged using AGM?使用 AGM 拖动地图时如何将 Google 地图标记保持在中心？
【发布时间】：2021-06-12 13:09:12
【问题描述】：

我在 Ionic 项目中使用 AGM（Angular Google Maps）在我的项目中显示 Google 地图，但我希望在拖动地图时标记保持在地图的中心。我可以用 AGM 来做吗？如果我犯了任何错误，请告诉我。谢谢。

这是我的 sn-p。到目前为止，我已经根据AGM Docs使用了dragend方法。

map.component.html

<agm-map
      #agmMap
      [style.height.px]="height"
      [latitude]="lat"
      [longitude]="lng"
      [zoom]="zoom"
      [usePanning]="true"
      (mapReady)="mapReady($event)"
    >
<agm-marker
        [iconUrl]="{
          url:
            'https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678111-map-marker-512.png',
          anchor: { x: 14.5, y: 28 },
          scaledSize: {
            width: 30,
            height: 30
          }
        }"
        [latitude]="lat"
        [longitude]="lng"
        [markerDraggable]="true"
        (dragEnd)="markerDragEnd($event)"
      ></agm-marker>
</agm-map>

map.component.ts

setNewCenter(latitude, longitude) {
    this.lat = latitude;
    this.lng = longitude;
    this.getAddress(this.lat, this.lng);
  }
public mapReady(map) {
    map.addListener("dragend", () => {
      this.setNewCenter(map.getCenter().lat(), map.getCenter().lng());
    });
  }

这是我使用dragend时的结果，你可以在这里查看-> https://ibb.co/9qVcLN5

当我使用drag 而不是dragend 时，它将如下所示。

【问题讨论】：

问题描述如何？什么不起作用？您是否查看过docs 中的可用事件？用drag 代替dragend 怎么样？
为什么不直接使用drag？根据文档，drag 代表This event is repeatedly fired while the user drags the map。
其实我已经尝试过使用“拖动”，但是标记仍然在以前的位置然后在我拖动地图时传送到中心（当我拖动它时它没有停留在中心)
@MrUpsidown 我已经为我的问题添加了更新。我已经添加了一些我到目前为止尝试过的演示
@NicholasD，我已经对我的问题添加了一些更新，希望你能清楚地理解它

标签： javascript angular typescript google-maps ionic-framework

【解决方案1】：

可以配合使用地图的drag事件

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Google Maps: Keep marker in map centre</title>
        <style>
            #map{
                width:800px;
                height:600px;
                float:none;
                margin:auto;
            }
        </style>
        <script>
            function initMap(){
                const latlng=new google.maps.LatLng( 51.495072, -0.100319 );
                const options = {
                    zoom: 16,
                    center:latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                const map = new google.maps.Map( document.getElementById('map'), options );
                
                let marker=new google.maps.Marker({
                    position:latlng,
                    map:map
                });
                
                google.maps.event.addListener( map, 'drag', e=>{
                    marker.setPosition( map.getCenter() )
                });
            }
        </script>
        <script async defer src='//maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap'></script>
    </head>
    <body>
        <div id='map'></div>
    </body>
</html>

Proof of concept Fiddle

【讨论】：

感谢您的帮助，但我需要使用 AGM 库（Angular Google Maps）的解决方案，因为我的项目使用该库，但我也会考虑使用它。