总之：
我想知道是否可以将标记聚类器包与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
我按照他的指示使用该指令，并通过删除该方法marker来阻止重复出现在地图上。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！）
此实例中的问题是标记聚类器需要new google.maps.Marker在标记对象上调用此方法才能工作。看来我不能将angularjs-google-maps包与包一起使用marker-clusterer。有没有人遇到过这个问题，有没有人有解决方案？
我尝试过的其他解决方案：
在工厂函数中创建变量以维护标记对象，并在页面更改并再次重新加载时使用 marker.setMap(null) 方法删除重复项。
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
如果有人对此问题有解决方案，将不胜感激。谢谢。