谷歌地图地理编码和setCenter

时间:2014-02-27 09:31:51

标签: javascript angularjs google-maps google-maps-api-3 angular-ui

我有这种奇怪的现象,但首先是代码

的HTML

<div ng-app='maptesting'>
       <div ng-controller="MapCtrl">
            <div id="map_canvas" ui-map="myMap" 
              style="height:300px;width:400px;border:2px solid #777777;margin:3px;     
              border:1px solid" 
              ui-options="mapOptions" 
              ui-event="{'map-idle' : 'onMapIdle()'}"
    >
</div>

的JavaScript

angular.module('maptesting', ['ui.map','ui.event']);
function MapCtrl($scope) {
    var ll = new google.maps.LatLng(30.9000, 40.2740);
    $scope.mapOptions = {
        center: ll,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var geocoder= new google.maps.Geocoder();

var map = new window.google.maps.Map(document.getElementById("map_canvas"),      
    $scope.mapOptions);

var address='los angeles';
geocoder.geocode({'address':address},function(results,status){
    if (status == google.maps.GeocoderStatus.OK){
        alert(address);
        alert(results[0].geometry.location);
        alert($scope.myMap);
        map.setCenter(results[0].geometry.location);
        test=results[0].geometry.location;
        var marker=new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
    }else{
        alert(status);
    }   
});


$scope.onMapIdle = function() {
    if ($scope.myMarkers === undefined){    
        var marker = new google.maps.Marker({
            map: $scope.myMap,
            position: ll
        });
        $scope.myMarkers = [marker, ];
    }
};

$scope.markerClicked = function(m) {
    window.alert("clicked");
};

}
一切似乎都没问题,标记,缩放,拖动,唯一不顺利的事情是map.setCenter,地图总是将他的中心设置在ll坐标中,任何人都可以帮助我吗?

在这里你可以找到一个小提琴http://jsfiddle.net/eb8Fd/1/,你可以看到中心不在加利福尼亚,而是在伊拉克,如果你迅速变焦,似乎有两张地图。

1 个答案:

答案 0 :(得分:3)

您有2个google.maps.Map - 个实例(1个是通过ui.map创建的,另一个是在MapCtrl中创建的)。

删除第二个实例的创建并使用以下代码:

//Markers should be added after map is loaded
    var address='los angeles';
    geocoder.geocode({'address':address},function(results,status){
        if (status == google.maps.GeocoderStatus.OK){
            alert(address);
            alert(results[0].geometry.location);
            alert($scope.myMap);
            $scope.myMap.setCenter(results[0].geometry.location);
            test=results[0].geometry.location;
            var marker=new google.maps.Marker({
              map: $scope.myMap,
              position: results[0].geometry.location
        });
        }else{
            alert(status);
        }   
    });

http://jsfiddle.net/doktormolle/eb8Fd/6/