使用 AGM 拖动地图时如何将 Google 地图标记保持在中心？
Posted
技术标签:
【中文标题】使用 AGM 拖动地图时如何将 Google 地图标记保持在中心？【英文标题】：How to Keep Google Map Marker in the center while the map is dragged using AGM? 【发布时间】：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，我已经对我的问题添加了一些更新，希望你能清楚地理解它
【参考方案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）的解决方案，因为我的项目使用该库，但我也会考虑使用它。以上是关于使用 AGM 拖动地图时如何将 Google 地图标记保持在中心？的主要内容，如果未能解决你的问题，请参考以下文章