Как я могу показать несколько маркеров с infobubbles() и вкладки в Google Maps API v3?
Я использую 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 ответ
Я ответил на свой собственный вопрос, используя тот же метод выше. Я получил сообщение от нескольких других, что это правильный путь.
я использую следующий код, чтобы определить один информационный пузырь, и я просто удаляю все вкладки, содержимое и перемещаю / перекомпоновываю контент для этого пузыря.
/**
* 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);
});