Я столкнулся с проблемой с маркером при нажатии на кластер - PullRequest
Новая
       53

Я столкнулся с проблемой с маркером при нажатии на кластер

0 голосов
/ 10 июня 2019

Я использую 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;
        });
      }
...