2017-07-03 7 views
0

私はおそらく本当に単純ですが、私はそれを把握していないと思われる何かをしたいです。角2+ Google Mapsは地図上のクリック位置から座標を取得してマーカの位置を更新します

Angular2 + Googleマップモジュールを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); 
} 

をそして、これが出力されます:私は今、この権利のようなイベントをcathingい

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 

答えて

2

私は答えを自分で発見しました。

私が使用していたHTML側で:

(mapClick)="placeMarker($event)" 

そしてtypescriptです側に私が使用していた:これは、個別に緯度とlontitudeを返し

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

、今私はこれらをプッシュすることができますその位置を更新するためにHTMLファイル内のマーカーに合わせます。

関連する問題