单击群集

时间:2019-06-10 10:47:55

标签: javascript google-maps google-maps-api-3 markerclusterer markerspiderfier

我正在使用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;
        });
      }

0 个答案:

没有答案