web-dev-qa-db-ja.com

Angular 2+ Googleマップは、マップ上のクリック位置から座標を取得してマーカーの位置を更新します

本当に簡単なことをしたいのですが、理解できないようです。

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
angulargoogle-mapscoordinatesgoogle-maps-markers
8
Marijn van der Steen

自分で答えを見つけました。

HTML側では、私は使用しなければなりませんでした：

(mapClick)="placeMarker($event)"

TypeScript側では、次のように使用する必要がありました。

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

これにより、緯度と経度が個別に返されます。これらの座標をHTMLファイルのマーカーにプッシュして、位置を更新できます。

18
Marijn van der Steen