Angular 2+ Google 地图从地图上的点击位置获取坐标以更新标记位置

2023-12-28

我想做一些可能非常简单的事情,但我似乎无法弄清楚。

我将 Angular2+ Google 地图模块集成到我的 Angular 项目中(https://angular-maps.com/ https://angular-maps.com/)。现在我希望能够通过单击地图上的某个位置来替换标记。为了做到这一点,我需要获取用户在地图上单击的位置的坐标。如果我有这些坐标,我可以更新经度和纬度来移动标记。但是我不确定如何获取单击的位置。

这是我在 html 文档中的地图实现:

<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom" [streetViewControl]="false" [mapTypeControl]="true" [fullscreenControl]="true" (mapClick)="placeMarker()">
   <agm-marker [latitude]="latitude" [longitude]="longitude" [iconUrl]="'assets/geomarker.png'"></agm-marker>
   <agm-circle [latitude]="latitude" [longitude]="longitude" [radius]="20" [fillOpacity]="0.50" [fillColor]="'#00A19A'"></agm-circle>
</agm-map>

我正在使用 mapClick 输出事件。 (https://angular-maps.com/api-docs/agm-core/components/AgmMap.html https://angular-maps.com/api-docs/agm-core/components/AgmMap.html)但是这个事件似乎没有发出任何坐标。我现在正在这样处理这个事件:

placeMarker(){
  console.log(event);
}

这是输出:

MouseEvent {isTrusted: true, screenX: 3657, screenY: 67, clientX: 401, clientY: 318…}
altKey
:
false
bubbles
:
true
button
:
0
buttons
:
0
cancelBubble
:
false
cancelable
:
true
clientX
:
401
clientY
:
318
composed
:
true
ctrlKey
:
false
currentTarget
:
null
defaultPrevented
:
false
detail
:
1
eventPhase
:
0
fromElement
:
null
isTrusted
:
true
layerX
:
364
layerY
:
154
metaKey
:
false
movementX
:
0
movementY
:
0
offsetX
:
364
offsetY
:
154
pageX
:
401
pageY
:
318
path
:
Array(23)
relatedTarget
:
null
returnValue
:
true
screenX
:
3657
screenY
:
67
shiftKey
:
false
sourceCapabilities
:
InputDeviceCapabilities
srcElement
:
div
target
:
div
timeStamp
:
18285.225000000002
toElement
:
div
type
:
"click"
view
:
Window
which
:
1
x
:
401
y
:
318
__proto__
:
MouseEvent

我自己已经找到了答案。

在 HTML 方面我必须使用:

(mapClick)="placeMarker($event)"

在打字稿方面我必须使用:

  placeMarker($event){
    console.log($event.coords.lat);
    console.log($event.coords.lng);
  }

这将分别返回纬度和经度,现在我可以将这些坐标推送到 HTML 文件中的标记以更新其位置。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular 2+ Google 地图从地图上的点击位置获取坐标以更新标记位置 的相关文章

随机推荐