首页 文章

Angular Google映射地理编码回调

提问于
浏览
5

我有一些谷歌 Map 地理编码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>

Map 不会显示 .

但是,如果我打电话:

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

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

任何线索?

谢谢你的宝贵帮助:)

1 回答

  • 3

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

    你必须使用:

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

相关问题