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：代码未经过测试，我只是尝试重新创建我一个月前所做的事情

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

1 个答案: