我正在使用google maps api v3和重叠标记spiderfier。一切工作正常。我面临的唯一问题是,当我单击标记群集时,我想显示加号图标,当单击该图标时,将有2个蜘蛛状图标。一切似乎都很好,但是当我单击群集时,对于一个实例或1秒钟标记,显示,然后加号标记来解决该问题,我正在附加视频,希望能找到解决方案。
这是您可以了解我的缝合的视频链接。 https://youtu.be/zwDYa2-jsqA
我已经尝试了标记点击事件,但这不能解决问题
function initMap() {
var clusterMarker = [];
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(50, 3),
zoom: 6,
mapTypeId: 'terrain'
});
// Create infowindow
var infoWindow = new google.maps.InfoWindow();
// Create OverlappingMarkerSpiderfier instsance
var oms = new OverlappingMarkerSpiderfier(map, {markersWontMove: true, markersWontHide: true, keepSpiderfied: true, circleSpiralSwitchover: 40 });
// This is necessary to make the Spiderfy work
oms.addListener('click', function(marker) {
infoWindow.setContent(marker.desc);
infoWindow.open(map, marker);
});
// Some sample data
var locations = [{lat:50, lng:3}, {lat:50, lng:3}, {lat:50, lng:7}];
//var iconBase1 = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
var iconBase = 'https://demo.joinwebs.com/classiera/lime/wp-content/uploads/2017/12/';
var icons = {
parking: {
icon: iconBase + 'services.png'
},
library: {
icon: iconBase + 'services.png'
},
info: {
icon: iconBase + 'automotive.png'
}
};
var features = [
{
type: 'info'
}, {
type: 'parking'
}, {
type: 'library'
}
];
for (var i = 0; i < locations.length; i ++) {
var point = locations[i];
var location = new google.maps.LatLng(point.lat, point.lng);
var markers = new google.maps.Marker({
position: location,
animation: google.maps.Animation.DROP,
icon: icons[features[i].type].icon
});
oms.addListener('unspiderfy', function (markers) {
for(i=0;i<markers.length;i++){
markers[i].setIcon('marker-plus.svg');
}
});
oms.addListener('spiderfy', function (markers) {
for(i=0;i<markers.length;i++){
markers[i].setIcon(icons[features[i].type].icon);
}
});
google.maps.event.addListener(map, 'idle', function(){
var stuff = oms.markersNearAnyOtherMarker();
for(i=0;i<stuff.length;i++){
stuff[i].setIcon('marker-plus.svg');
}
function clearMarkers() {
setMapOnAll(null);
}
});
// text to appear in window
markers.desc = "Number "+i;
// needed to make Spiderfy work
oms.addMarker(markers);
// needed to cluster marker
clusterMarker.push(markers);
}
var markerCluster = new MarkerClusterer(map, clusterMarker, {
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m',
maxZoom: 15,
averageCenter: true
});
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
markers.open = false;
});
}