Angular 谷歌地图地理编码回调

Posted

技术标签:

【中文标题】Angular 谷歌地图地理编码回调【英文标题】:Angular Google maps geocoding callback 【发布时间】:2015-12-17 03:50:12 【问题描述】:

我对 google maps geocoding api 有一些问题。

我正在使用 Angular Google Maps 并尝试使用回调函数对地址进行地理编码:

.controller('myCtrl', ['$scope', '$rootScope', 'uiGmapGoogleMapApi', function ($scope, $rootScope, uiGmapGoogleMapApi) 

    // To be set by previous step
    $rootScope.chosenTown = "Roma"

    // geocode the given address
    var geocodeAddress = function(address, callback) 
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode(  'address': address, function(results, status) 
            if (status == google.maps.GeocoderStatus.OK) 
                callback(results[0].geometry.location);
             else 
                console.log("Geocode was not successful for the following reason: " + status);
            
        );
    ;

    // google maps is ready
    uiGmapGoogleMapApi.then(function(maps) 
        // geocode chosen town
        geocodeAddress($rootScope.chosenTown, function(latLng)
            console.log("1  " + latLng.lat())
            console.log("2  " + latLng.lng())
            $scope.map =  center:  latitude: latLng.lat(), longitude: latLng.lng() , zoom: 12, bounds: ;
        );

    );
])

还有html代码:

<div class="col-lg-5 finalStepMap">
        <ui-gmap-google-map center='map.center' zoom='map.zoom' draggable="true" options="options" bounds="map.bounds">
            <ui-gmap-markers models="markers" coords="'self'" options="'options'"></ui-gmap-markers>
        </ui-gmap-google-map>
</div>

地图不显示。

但是,如果我打电话:

$scope.map =  center:  latitude: 10, longitude: 40, zoom: 12, bounds: ;
        );

在回调函数之外使用固定的 lat 和 lng,一切正常。

有什么线索吗?

感谢您的宝贵帮助:)

【问题讨论】:

【参考方案1】:

经过更多的谷歌搜索,我终于找到了答案!

你必须使用:

$scope.$apply(function()  
    $scope.map = ...
);

【讨论】:

以上是关于Angular 谷歌地图地理编码回调的主要内容,如果未能解决你的问题,请参考以下文章

谷歌地理编码 API 不如使用地址的谷歌地图准确

用于场地的谷歌地图地理编码器

如何解析谷歌地图地理编码结果

如何从谷歌地图地理编码返回地址类型?

谷歌地图地理编码器返回相同的结果

从谷歌地图的地理位置获取邮政编码