на маркере щелкните закрыть infobubble

Question

Я использую Gmap3 Плагин jQuery с плагином infobubble и получите php, чтобы получить ответ json для добавления маркеров.

Я добавил маркер GoogleMap, используя addMarkers вариант Gmap3 плагин.

{ 
    action: 'addMarkers', 
    markers:address_data, 
    marker: 
    { 
     options: 
     { 
      draggable: false, 
      icon: HOST+'img/icons/google_marker.png', 
      animation: google.maps.Animation.DROP 
     }, 
     events: 
     { 
      click: function(marker, event, data) 
      { 
       var map = $(this).gmap3('get'); 

       infoBubble = new InfoBubble({ 
        maxWidth: 310, 
        shadowStyle: 1, 
        padding: 5, 
        borderRadius: 10, 
        arrowSize: 20, 
        borderWidth: 5, 
        borderColor: '#CCC', 
        disableAutoPan: true, 
        hideCloseButton: false, 
        arrowPosition: 50, 
        arrowStyle: 0 
       }); 

       if (!infoBubble.isOpen()) 
       { 
        infoBubble.setContent(data); 
        infoBubble.open(map, marker); 
        console.log('open'); 
       } 
       else 
       { 
        infoBubble.close(); 
       } 

      } 
     } 
    } 
} 

Все работает хорошо при первой попытке, но когда я нажимаю на маркер, тогда всплывает информационный пузырь.

Означает, что если у меня есть один маркер и некоторый контент для отображения в пузырьке, тогда, когда я продолжаю нажимать на тот же самый маркер, добавляется один на другой, но то, что мне нужно »Мне нужно закрыть старый информационный пузырь, если маркер щелкнул снова или другой маркер щелкнули «как нормальная доза инфузии.

Надеюсь, что смогу сделать четкую точку.

Спасибо.

Answer 1

Объявите infoBubble как var вне обработчика click и создайте его там.

Тогда будут проведены проверки для infoBubble.isOpen().

От кода, который вы указали, вы создаете новый infoBubble на каждом клике, поэтому проверка infoBubble.isOpen() применяется к этому вновь созданному объекту.

Как это сделать

Объявить var infobubble; в качестве глобальной переменной.

и внутри обработчика событий щелчка добавьте строку ниже, которая сделает это.

if(infoBubble != null) { infoBubble.close(); } 

так код будет выглядеть, как показано ниже,

var infobubble; 
//other code for getting markers and all and then `addMarkers` code 
{ 
    action: 'addMarkers', 
    markers:address_data, 
    marker: 
    { 
     options: 
     { 
      draggable: false, 
      icon: HOST+'img/icons/google_marker.png', 
      animation: google.maps.Animation.DROP 
     }, 
     events: 
     { 
      click: function(marker, event, data) 
      { 
       var map = $(this).gmap3('get'); 

       if(infoBubble != null) { infoBubble.close(); } 

       infoBubble = new InfoBubble({ 
        maxWidth: 310, 
        shadowStyle: 1, 
        padding: 5, 
        borderRadius: 10, 
        arrowSize: 20, 
        borderWidth: 5, 
        borderColor: '#CCC', 
        disableAutoPan: true, 
        hideCloseButton: false, 
        arrowPosition: 50, 
        arrowStyle: 0 
       }); 

       infoBubble.setContent(data); 
       infoBubble.open(map, marker); 
      } 
     } 
    } 
}