Angular 2+ Google Maps obtient les coordonnées de la position du clic sur la carte pour mettre à jour la position du marqueur
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 Angular ( https://angular-maps.com/ ). Maintenant je veux pouvoir remplacer le marqueur en cliquant quelque part sur la carte. Pour ce faire, je dois récupérer 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 assurez-vous comment récupérer l'emplacement cliqué.
Voici mon implémentation de 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. J'organise l'événement comme ceci en ce moment:
placeMarker(){
console.log(event);
}
Et voici 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
J'ai trouvé la réponse moi-même.
Côté HTML, j'ai dû utiliser:
(mapClick)="placeMarker($event)"
Et du côté TypeScript, j'ai dû utiliser:
placeMarker($event){
console.log($event.coords.lat);
console.log($event.coords.lng);
}
Cela renvoie la latitude et la lontitude individuellement, maintenant je peux pousser ces coordonnées vers le marqueur dans le fichier HTML pour mettre à jour son emplacement.