导航谷歌地图屏幕以更新标记位置答案

【问题标题】：Navigate google map screen to updated marker position导航谷歌地图屏幕以更新标记位置
【发布时间】：2018-01-30 11:56:46
【问题描述】：

我正在使用 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
}

这是我更新标记后的屏幕。标记丢失。谢谢

【问题讨论】：

标签： angular google-maps angular2-services

【解决方案1】：

您可以向agm-map 组件提供纬度和经度，以使地图以该坐标为中心。

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

上面的示例使地图以标记为中心。

来自API docs：

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

【讨论】：

那已经被映射了。我认为我需要调用 agmMap.triggerResize() 方法。但我不知道如何在我的 ts 类中获取 agmMap 对象。它始终为空。
您也可以在agm-map 上申请usePanning。每当两者之一发生变化时，这都会导致地图以提供的纬度和经度为中心。 (<agm-map [latitude]="latitude" [longitude]="longitude" [usePanning]="true">)
感谢我使用该属性的响应。它的描述与您提到的相同，但它不起作用。我正在更新模型，但它不工作
在我目前正在开发的应用程序中运行良好。您能否显示您的视图文件的代码（您放置<agm-map> 等的文件）或在Plnkr 中复制问题？
谢谢@kaj。我能够找出问题所在。基本上问题是我用不同的变量映射'agm-marker'和'agm-map'。因此，一旦我开始用相同的方式对其进行映射，它就可以正常工作。请检查答案，我现在放。谢谢

【解决方案2】：

我能够找出问题所在。基本上问题是我用不同的变量映射'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>

【讨论】：

这在我的情况下不起作用。我的代码：

【解决方案3】：

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

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

您的 .ts：

latitude: number = 21.4949494;
longitude: number = 101.49834;

那些变量必须是数字而不是字符串。使用 parseFloat 来解决这个问题。

【讨论】：