Angulaire 2+ Google Maps obtenir des coordonnées à partir de la position de clic sur la carte pour mettre à jour la position du marqueur

Question

Je veux faire quelque chose qui est probablement très simple mais je n'arrive pas à le comprendre.

J'ai intégré le module Angular2 + Google Maps à mon projet Angular (https://angular-maps.com/). Maintenant, je veux être en mesure de remplacer le marqueur en cliquant quelque part sur la carte. Pour ce faire, je dois aller chercher les coordonnées de l'endroit où l'utilisateur a cliqué sur la carte. Si j'ai ces coordonnées, je peux mettre à jour la longitude et la latitude pour déplacer le marqueur. Cependant, je ne suis pas sûr de savoir comment récupérer l'emplacement sur lequel vous avez cliqué.

Ceci est ma mise en œuvre de la carte dans le document 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> 

J'utilise l'événement de sortie mapClick. (https://angular-maps.com/api-docs/agm-core/components/AgmMap.html) Cependant, cet événement ne semble pas émettre de coordonnées. Je cathing l'événement comme celui-ci en ce moment:

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

Et c'est la sortie:

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 

Answer 1

J'ai trouvé la réponse moi-même.

Du côté HTML je devais utiliser:

(mapClick)="placeMarker($event)" 

Et du côté dactylographiée je devais utiliser:

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

Ce retourne la latitude et Longitude à individuellement, maintenant je peux pousser ces coordonnées au marqueur dans le fichier HTML pour mettre à jour son emplacement.