2017-08-22 3 views
0

Ich benutze AGM (eckige Google Map) für Kartenmaterial. Ich habe einen getCurrentLocation-Button gesetzt, der den Längen- und Breitengrad des aktuellen Standorts angibt. Ich kann den Marker an diesem Ort aktualisieren, aber meine Karten navigieren nicht zu diesem bestimmten Ort. Hier ist mein Beispielcode.Navigieren google map Bildschirm zu aktualisierten Marker Position

getCurrentLocation() { 

    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition((response) => { 
      this.setPosition(response); 
     }, function() { 
      alert("Unable to get the GPS location"); 
     }, { maximumAge: 60000, timeout: 5000, enableHighAccuracy: true }); 
    }; 
} 

und hier ist meine setPosition Methode

setPosition(position: Position) { 
    this.marker.lat = position.coords.latitude; 
    this.marker.lng = position.coords.longitude; 
    //What to do here to move screen to this marker position 
} 

Hier ist mein Bildschirm nach dem Marker zu aktualisieren. Markierung ist verloren. Danke enter image description here

Antwort

0

Sie können die Breite und Länge der agm-map Komponente zur Verfügung stellen, um die Karte selbst um diese Koordinate herum zu zentrieren.

<agm-map [latitude]="latitude" [longitude]="longitude"> 
    <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> 
</agm-map> 

Das obige Beispiel zentriert die Karte um den Marker herum.

Vom API docs:

  • latitude: Der Spielraum, der das Zentrum der Karte definiert.
  • longitude: Der Längengrad, der das Zentrum der Karte definiert.
+0

Das ist bereits zugeordnet. Ich muss agmMap.triggerResize() Methode meiner Meinung nach anrufen. Aber ich weiß nicht, wie ich das agmMap-Objekt in meiner Klasse bekommen kann. Es ist immer null. –

+0

Sie können 'usePanning' auch auf der' agm-map' anwenden. Dadurch wird die Karte immer dann um die angegebene Breite und Länge zentriert, wenn sich eine der beiden ändert. ('') –

+0

Danke für die Antwort, die ich diese Eigenschaft verwendet habe. Es ist eine Beschreibung, die das selbe sagt, aber es funktioniert nicht. Ich aktualisiere das Modell, aber es funktioniert nicht –

0

Ich war in der Lage, das Problem herauszufinden. Grundsätzlich Problem war, dass ich 'agm-marker' und 'agm-map' [latitude] und [longitude] mit verschiedenen Variablen abbildete. Sobald ich angefangen habe, es mit denselben Variablen zu mappen, fing es an, gut zu funktionieren.

<agm-map [latitude]="signageRequest.gpsXcoordinate" [clickableIcons]="gpsXcoordinateStatus.readonly" [mapDraggable]="!gpsXcoordinateStatus.readonly" 
[longitude]="signageRequest.gpsYcoordinate" [zoom]="zoom" [disableDefaultUI]=false [zoomControl]=false (mapClick)="mapClicked($event)" 
    [usePanning]="true"> 
    <agm-marker [latitude]="signageRequest.gpsXcoordinate" [longitude]="signageRequest.gpsYcoordinate" [markerDraggable]="false" 
      (dragEnd)="markerDragEnd(marker, $event)"></agm-marker> 
</agm-map>