【问题标题】：google map geocode and setCenter谷歌地图地理编码和setCenter
【发布时间】：2014-02-27 09:31:50
【问题描述】：

我有这个奇怪的现象，但首先是代码

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");
};

}

一切似乎都还好，marker、zoom、drag，唯一不顺利的就是map.setCenter，地图总是把他的中心设置在ll坐标，谁能帮帮我？

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

【问题讨论】：

results[0].geometry.location 包含什么？可能是因为那个结果元素不是LatLng 对象？
你能把它放到 JSFiddle 中以便我们诊断问题吗？
不，它是一个 LatLng，我在警报中看到了它
您会花 1 分钟时间正确缩进代码并消除错误吗？
标记是否显示在正确的位置？此外，您的 .onMapIdle 函数将永远不会创建新标记，因为对象结果是地理编码器函数的本地结果。

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

【解决方案1】：

你有 2 个google.maps.Map-instances（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/

【讨论】：