要約すれば：
マーカー クラスタラー パッケージをパッケージと組み合わせることが可能かどうか、および問題の解決策があるかどうかを知りたいです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(私の評判ポイントは 10 未満なので、2 つ以上のリンクを投稿することはできません!)
この場合の問題は、マーカー クラスタラーが機能する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
誰かがこの問題の解決策を持っているなら、それは大歓迎です。ありがとう。