0
中合併標記聚類器和谷歌地圖API的總結：Angularjs框架
我想知道，如果有可能的標記聚類器包與包angularjs-google-maps結合，如果有這個問題的任何解決方案。
詳細信息：
我更換angular-google-maps包，因爲它是不再保留。推薦的替代方案是angularjs-google-maps這是我在下面的代碼中使用：
HTML：
<ng-map></ng-map>
Angularjs：
var lpool= {lat: 53.4084, lng: -2.9916};
var self = this;
var self.customers = [];//data objects received elsewhere
//retrieve map object
NgMap.getMap().then(function(map) {
self.mapObject = map;
//Liverpool geolocation
var options = {
zoom:12,
center:lpool
};
//options passed to map
self.mapObject.setOptions(options);
createMarkers(); // Start the chain
});
function createMarkers() {
// marker icons
var iconUrlBlue = 'modules/driver/images/gm-marker-blue.png';
var iconUrlPink = 'modules/driver/images/gm-marker-pink.png';
// min/max values for nudging markers who are on the same spot
var min = 0.999999;
var max = 1.000001;
var markers = [];
self.customers.forEach(function(customer) {
// create info window instance
var infoWindow = new google.maps.InfoWindow(),
latitude = customer.location[1] * (Math.random() * (max - min) + min),
longitude = customer.location[0] * (Math.random() * (max - min) + min);
//create marker instance
var googleMarker = new google.maps.Marker({
position:{
lat:latitude,
lng:longitude
},
map:self.mapObject,
icon:iconUrlPink,
});
function clickMarker() {
//wrapped in apply function so Angular makes list changes
$scope.$apply(function(){
customer.isChecked = !customer.isChecked;
googleMarker.setIcon(customer.isChecked ? iconUrlBlue : iconUrlPink);
});
}
function showWindow(){
infoWindow.setOptions({
content:'<h4><strong>' + customer._id + '</strong> ' + customer.address + '</h4>',
position:{lat:latitude, lng:longitude},
pixelOffset: new google.maps.Size(0, -33)
});
infoWindow.open(self.mapObject);
}
function hideWindow(){
infoWindow.close();
}
//apply previous functions to the marker
googleMarker.addListener('click', clickMarker);
googleMarker.addListener('mouseover', showWindow);
googleMarker.addListener('mouseout', hideWindow);
markers.push(googleMarker);
});
//create marker cluster instance
var markerCluster = new MarkerClusterer(self.mapObject, markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
的問題是，這些標記是重複的，每當我改變頁面並重新加載地圖頁面。這裏是由業主在angularjs-google-maps包的這個問題指出的問題：
https://github.com/allenhwkim/angularjs-google-maps/issues/575
我跟着他的指示使用指令，並通過刪除new google.maps.Marker方法停止出現在地圖上的重複。下面是代碼：
HTML：
<ng-map id="googleMap">
<marker ng-repeat="marker in driverCtrl.markers"
position="{{marker.pos}}"
on-click="marker.clickMarker()"
icon="{{marker.icon}}"
on-mouseover="marker.showWindow(marker)"
on-mouseout="marker.hideWindow()"></marker>
</ng-map>
Angularjs：
var lpool= {lat: 53.4084, lng: -2.9916};
var self = this;
var self.customers = [];//data objects received elsewhere
//retrieve map object
NgMap.getMap('googleMap').then(function(map) {
self.mapObject = map;
//Liverpool geolocation
var options = {
zoom:12,
center:lpool
};
//options passed to map
self.mapObject.setOptions(options);
createMarkers(); // Start the chain
});
// 3. Configure google markers for each customer
function createMarkers() {
// marker icons
var iconUrlBlue = 'modules/driver/images/gm-marker-blue.png';
var iconUrlPink = 'modules/driver/images/gm-marker-pink.png';
var infoWindow = new google.maps.InfoWindow();
// min/max values for nudging markers who are on the same spot
var min = 0.999999;
var max = 1.000001;
var markers = [];
self.customers.forEach(function(customer) {
// create info window instance
var latitude = customer.location[1] * (Math.random() * (max - min) + min),
longitude = customer.location[0] * (Math.random() * (max - min) + min);
//create marker instance
var googleMarker = {
pos:[
latitude,
longitude
],
position:{
lat:latitude,
lng:longitude
},
map:self.mapObject,
icon:iconUrlPink,
clickMarker : function() {
customer.isChecked = !customer.isChecked;
googleMarker.icon = customer.isChecked ? iconUrlBlue : iconUrlPink;
},
showWindow : function(){
infoWindow.setOptions({
content:'<h4><strong>' + customer._id + '</strong> ' + customer.address + '</h4>',
position:{lat:latitude, lng:longitude},
pixelOffset: new google.maps.Size(0, -33)
});
infoWindow.open(self.mapObject);
},
hideWindow : function(){
infoWindow.close();
}
};
markers.push(googleMarker);
});
self.markers = markers;
//create marker cluster instance
var markerCluster = new MarkerClusterer(self.mapObject, self.markers,
{imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
}
這是標記聚類器庫：
https://googlemaps.github.io/js-marker-clusterer/docs/examples.html（我不能發佈超過2個鏈接，因爲我有少於10個聲望點！）
在這種情況下的問題我s標記聚類器需要在標記對象上調用此方法new google.maps.Marker才能工作。看來我不能將angularjs-google-maps包與marker-clusterer包一起使用。有沒有人遇到過這個問題，有沒有人有解決方案？
其他的解決方案我已經試過：
在工廠的功能，以保持標記對象，並使用marker.setMap（空）方法來刪除重複創建變量時，頁面變更並重新加載再次。
我也用下面的代碼來
null標記實例的狀態轉換之前（變更頁）：var flag = false; $scope.$on("$stateChangeStart", function(event, to, toParams) { if (flag) { flag = false; return; } markers.forEach(function(marker){ marker.setMap(null); }); markers = []; event.preventDefault(); flag = true; $state.go(to, toParams); });
按這裏設立的說明：
https://github.com/angular-ui/ui-router/issues/1158
如果有人有解決這個問題，將不勝感激。謝謝。