将Google地图屏幕导航到更新的标记位置

时间:2017-08-22 09:16:06

标签: angular google-maps angular2-services

我正在使用AGM(角谷歌地图)来制作地图。我放了一个getCurrentLocation按钮,它返回当前位置的纬度和经度。我能够将标记更新到该位置,但我的地图未导航到该特定位置。这是我的示例代码。

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 });
    };
}

这是我的setPosition方法

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
}

更新标记后,这是我的屏幕。标记丢失了。谢谢 enter image description here

3 个答案:

答案 0 :(得分:0)

您可以为agm-map组件提供纬度和经度,使地图居中于该坐标周围。

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

上面的例子将地图围绕着标记。

来自API docs

  • latitude:定义地图中心的纬度。
  • longitude:定义地图中心的经度。

答案 1 :(得分:0)

我能够找出问题所在。基本上问题是我用不同的变量映射'agm-marker'和'agm-map'[纬度]和[经度]。所以一旦我开始用相同的变量映射它,它开始工作正常。

<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>

答案 2 :(得分:0)

也许为时已晚。我遇到了同样的问题。

Bars

您的.ts:

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

这些变量 必须是数字而不是字符串。 使用parseFloat可以解决该问题。