Angular 2+ Google Maps從地圖上的點擊位置獲取座標以更新標記位置

我想做一些可能非常簡單的事情，但我似乎無法弄清楚。Angular 2+ Google Maps從地圖上的點擊位置獲取座標以更新標記位置

我將Angular2 + Google Maps模塊集成到我的Angular項目中（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）但是這個事件似乎沒有發出任何座標。我導尿事件像現在這樣的權利：

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

來源

2017-07-03 Marijn van der Steen

我已經找到自己的答案。

在HTML方面，我不得不使用：

(mapClick)="placeMarker($event)"

而且在打字稿身邊，我只好用：

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

這單獨返回的緯度和lontitude，現在我可以把這些座標到HTML文件中的標記以更新其位置。

來源

2017-07-03 13:51:42

Angular 2+ Google Maps從地圖上的點擊位置獲取座標以更新標記位置

回答

相關問題