Как я могу показать несколько маркеров с infobubbles () и вкладки в Google Maps API v3? - PullRequest
Новая
       35

Как я могу показать несколько маркеров с infobubbles () и вкладки в Google Maps API v3?

0 голосов
/ 27 декабря 2011

Я использую Google Maps API v3 и плагин InfoBubbles. Я пытаюсь заполнить карту несколькими маркерами. Каждый маркер имеет инфо-пузырь, который открывается при нажатии. Эти InfoBubbless имеют вкладки (до 3 вкладок) каждая со своим собственным содержанием и HTML.

Как я могу заставить маркеры отображаться на картах с их вкладками и инфопузырьками.

В настоящее время я устанавливаю инфопузыри и маркеры для массивов и использую открытую функцию для обработки щелчка при передаче индекса. 

        infoBubbles[i] = new InfoBubble({ 
            map: map, 
            minHeight: point[i].min_height,
            maxHeight: point[i].max_height,
            minWidth: point[i].min_width,
            maxWidth: point[i].max_width,
            disableAutoPan: false, 
            hideCloseButton: false, 
            arrowPosition: 30, 
            padding:12
        }); 
        google.maps.event.addListener(marker, 'click', handleMarkerClick(marker, i));

и функция щелчка маркера: 

function handleMarkerClick(marker,index) { 
    return function() { 
        if (!infoBubbles[index].isOpen()) { 
            infoBubbles[index].open(map, marker); 
        }else{
            infoBubbles[index].close(map, marker); 
        }
    } 
}

1 Ответ

0 голосов
/ 29 декабря 2011

Я ответил на свой вопрос, используя тот же метод, описанный выше.Я получил сообщение от нескольких других, что это правильный путь.

Я использую следующий код для определения одного информационного пузыря, и я просто удаляю все вкладки, содержимое и перемещаю / перекомпоновываю содержимое для этого пузыря. 

/**
 * add a listener for the click of a marker
 * when the marker is clicked, get the current amount
 * of tabs, and remove each tab. Then reset the width/heights
 * and readd the new tabs with their content.
 * @return {[type]}
 */
google.maps.event.addListener(marker, 'click', function(){

    /** remove all of the tabs from the infobubble, early prototype */
    if (tabCount > 0){
        for (var i = 0; i < tabCount; i++){
            infoBubble.removeTab(0);
        }   
        tabCount = 0;   
    }

    /** setup the min/max width and heights for the bubble */
    infoBubble.setMinWidth(this.infoBubble_minWidth);
    infoBubble.setMaxWidth(this.infoBubble_maxWidth);
    infoBubble.setMinHeight(this.infoBubble_minHeight);
    infoBubble.setMaxHeight(this.infoBubble_maxHeight);

    var tabs = this.infoBubble_tabs;

    /** @type {Number} set the counter to 1, since tab index starts at 1 */
    for (var ii = 0; ii < tabs.length; ii++) {
        infoBubble.addTab(tabs[ii].tabTitle, tabs[ii].tabContent);
        /** count the amount of tabs there are */
        tabCount++;
    }
    /** open the infoBubble */
    infoBubble.open(map, this);
});
...