我使用谷歌地图apis在我的应用程序中显示地图。当我缩小地图时,看起来地图已堆叠在另一个地图上。即似乎是另一张地图的一层。如何避免它,并请它为什么会发生。 在这里输入代码
var map = angular.module('map', ['inventoryFilters', 'inventoryServices'])
.controller('mapCtrl', function ($scope, $filter, $http, JsonFileRepo) {
var filteritems = [];
filteredSites();
$scope.$on('filter-updated', function (event) {
filteredSites();
});
function filteredSites() {
JsonFileRepo.getSites().
then(function (sites) {
filteritems = "";
$scope.sitesInfo = sites;
filteritems = $filter('applyRegionSelections')($scope.sitesInfo);
filteritems = $filter('applySoftwareSelections')(filteritems);
updateMap(filteritems);
},
function () {
console.log('sites retrieval failed.');
});
};
var mapOptions = {
zoom: 2,
center: new google.maps.LatLng(53.0, -1.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
function createMarker (info) {
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.location.lat, info.location.lng),
title: info.location.city,
});
marker.content = '<div class="infoWindowContent">' + info.name + '</div>';
google.maps.event.addListener(marker, 'click',
(function (id) {
return function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
console.log("Floc id =" + id);
};
})( info.FLOCID)
);
$scope.markers.push(marker);
}
function updateMap(filteritems) {
angular.forEach($scope.markers, function (marker) {
marker.setMap(null);
});
$scope.markers.splice(0, $scope.markers.length);
for (i = 0; i < filteritems.length; i++) {
createMarker(filteritems[i]);
}
};