Функция открытия Infobubble не работает в событии с загруженной плиткой? - PullRequest
Новая
       35

Функция открытия Infobubble не работает в событии с загруженной плиткой?

0 голосов
/ 20 сентября 2019

Я использую плагин InfoBubble.js для API карт Google v3.Я нарисовал несколько полигонов на карте и поместил маркер в центр каждого полигона.Используя Infobubble, я по умолчанию помещаю стилизованные окна infobubble в позиции маркера.Вот так это выглядит. маркер с окном информационной панели. Поскольку у меня больше маркера, я использую markerclusterers для группировки маркеров.Здесь проблема возникает при кластеризации маркеров.Маркеры прячутся внутри кластеров при уменьшении масштаба, оставляя окна без пузырьков без маркеров.Поэтому я попытался сохранить маркеры и объект infobubble в массивах и открыть его, только если маркер, если он виден.Но это не работает.Может кто-нибудь указать мне, что я здесь делаю неправильно? 

             var markers = [];          
             var infobubbles = [];
             for(var i = 0; i < polygon_coordinates.length; i++){
                var bounds = new google.maps.LatLngBounds();
                arr = [];
                var obj = polygon_coordinates[i];
                for(var j = 0; j < obj.length; j++){
                    arr.push( new google.maps.LatLng(
                        parseFloat(obj[j].lat),
                        parseFloat(obj[j].lng)      
                    ));
                    bounds.extend(arr[arr.length-1]);                 
                }

                polygons.push(new google.maps.Polygon({
                    paths: arr,
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#f3f2f3',
                    fillOpacity: 0
                }));

                polygons[polygons.length-1].setMap(map);

                var center_response = JSON.stringify(bounds.getCenter());
                var latitude = JSON.parse(center_response).lat;
                var longitude = JSON.parse(center_response).lng;
                var poly_center = {lat: latitude,lng: longitude};

                var marker = new google.maps.Marker({
                    position: poly_center,
                    map: map,
                    title: '',
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,            
                        fillColor: 'red',
                        fillOpacity: 0.8,
                        scale: 5,
                        strokeColor: 'White',
                        strokeWeight: 3            
                    }
                });         

                markers.push(marker);

                infoBubble = new InfoBubble({
                    map: map,
                    content: '<div id="test">Test</div>',
                    position: poly_center,
                    shadowStyle: 1,
                    padding: 0,
                    backgroundColor: '#72cefc',
                    borderRadius: 6,
                    arrowSize: 8,
                    borderWidth: 3,
                    borderColor: 'White',
                    disableAutoPan: true,
                    hideCloseButton: true,
                    arrowPosition: 50,
                    backgroundClassName: 'transparent',
                    arrowStyle: 0
                });

                infobubbles.push(infoBubble);                   
            }   


            var markerCluster = new MarkerClusterer(map, markers, {imagePath: 'markers/m'});

            google.maps.event.addListener(map, 'tilesloaded', function() {                                      
                var bounds = map.getBounds();                   
                for(var i=0; i<markers.length; i++){        
                    //here I am opening the infobubble window only when the markers are 
                    //visible in the bounds             
                    if (bounds.contains(markers[i].getPosition())){                                                         
                        infobubbles[i].open(map, markers[i]); //the error occurs here                           
                    }else{          
                        infobubbles[i].close();                                             
                    }
                }
            });
...