谷歌地图标记未显示在确切位置

Question

在我的项目中，我集成了谷歌地图。我有一个问题：当我搜索特定位置时，标记未显示在当前点，它显示在其他地方。但是，纬度和经度是正确的，你能帮我理解我错过了什么吗？

注意：对于某些位置，标记会显示在正确的位置。

HTML代码：

<input ng-model="address" class="form-control" ng-map-autocomplete/>
<ng-map zoom="18" center="{{address}}" style="width:650px; height:450px">
    <marker position="{{address}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

控制器：

$scope.$watch(function ($scope) { return $scope.chosenPlaceDetails }, function () {
    if (angular.isDefined($scope.chosenPlaceDetails )) {
        $scope.latitude= $scope.chosenPlaceDetails.geometry.location.lat();
        $scope.longitude=$scope.chosenPlaceDetails.geometry.location.lng();
    }
});

Answer 1

根据 Ng-map-autocomplete 文档，{{address}} 只是用于自动完成的值。您可以附加一个“详细信息”值，该值将包含您所在位置的纬度和经度。

    <input type="text"  ng-map-autocomplete ng-model="autocomplete" options="options" details="details"/>

然后，在您的 ng-map 指令中，您可以访问 lat 和 long

<ng-map zoom="18" center="{{details.geometry.location.lat}},{{details.geometry.location.lng}}" style="width:650px; height:450px">
    <marker position="{{details.geometry.location.lat}},{{details.geometry.location.lng}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

如果你想在你的控制器中更新，你可以在细节上放一个 $watcher

$scope.$watch('details', function (newValue, oldValue) {
if (oldValue == undefined){
  $scope.latitude = 0 /*default value */
  $scope.longitude= 0 /*default value */
}
 $scope.latitude= newValue.geometry.location.lat;
$scope.longitude=newValue.geometry.location.lng;
});

然后您可以使用新变量访问 ng-map 指令中的位置。

<ng-map zoom="18" center="{{latitude}},{{longitude}}" style="width:650px; height:450px">
    <marker position="{{latitude}},{{longitude}}" title="{{address}}"  draggable="true"></marker>
</ng-map>

希望对您有所帮助。 来源：https://github.com/iazi/ngMapAutocomplete

Ps：代码未经测试，我只是尝试重新创建我一个月前所做的事情