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从地图上的点击位置获取坐标以更新标记位置

回答

相关问题