<分区>
指令.js:
.directive('map', function() {
return {
restrict: 'E',
scope: {
onCreate: '&'
},
link: function ($scope, $element, $attr) {
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(43.07493, -89.381388),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map($element[0], mapOptions);
$scope.onCreate({map: map});
// Stop the side bar from dragging when mousedown/tapdown on the map
google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
e.preventDefault();
return false;
});
}
if (document.readyState === "complete") {
initialize();
} else {
google.maps.event.addDomListener(window, 'load', initialize);
}
}
}
});
HTML:
<map on-create="mapCreated(map)" data-tap-disabled="true"></map>
controller.js:
//Map controller
$scope.mapCreated = function (map) {
$scope.map = map;
$scope.map.setCenter(new google.maps.LatLng(latitude1, longitude1));
createMarker(latitude1, longitude1, icon1);
createMarker(latitude2, longitude2, icon2);
//Create marker
var createMarker = function (lat, long, icon) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, long),
map: map,
icon: icon,
});
}
};
假设“latitude1、longitude1、latitude2、longitude2、icon1 和 icon2”已经初始化。
我的代码没有出错，但它没有缩小 map 以显示所有标记。我之前做过一些研究，但找不到合适的答案。感谢您的帮助。