AngularUI - 谷歌地图 - 地图是未定义

Question

我想使用谷歌地图的指令是这样的：

控制器方法

$scope.myMarkers = []; 

$scope.mapOptions = { 
    center : new google.maps.LatLng(35.784, -78.670), 
    zoom : 15, 
    mapTypeId : google.maps.MapTypeId.ROADMAP 
}; 

$scope.addMarker = function($event) { 
    $scope.myMarkers.push(new google.maps.Marker({ 
     map : $scope.myMap, 
     position : $event.latLng 
    })); 
}; 

UpdateLocation.html

<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]" ui-event="{'map-click': 'openMarkerInfo(marker)'}"></div> 

<div id="map_canvas" ui-map="myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div> 

地图显示完美，但在方法addMarker我得到一个undefined当0执行。

Answer 1

我相信你的控制器定义和ui-map div之间有一个新的范围被创建，发生的事情是'myMap'属性是在该范围上创建的，而不是在你的控制器范围内创建的。

为避免此类问题，请提供ui-map指令的适当模型。例如：

控制器：

$scope.model = { myMap: undefined }; 

HTML：

<div id="map_canvas" ui-map="model.myMap" class="map" ui-event="{'map-click': 'addMarker($event)'}" ui-options="mapOptions"></div> 

这将迫使ui-map指令到地图内容店内$scope.model.myMap并且由于范围的prototypically遗传，$scope.model对象将在子范围上可用，但始终属于父范围 - 控制器的范围。