我有这种奇怪的现象,但首先是代码
<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>
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/,你可以看到中心不在加利福尼亚,而是在伊拉克,如果你迅速变焦,似乎有两张地图。
答案 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);
}
});