Карты Google v3. Информационное окно с вкладками jquery

Я новичок в программировании Gmaps.

Я хочу создать InfoWindow, содержащее две вкладки, одна из которых только с информацией, а другая с некоторой HTML-формой (кнопка и текст).

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow/tabs.html

var checkText = "Coordinates";

var content = [
  '<div id="tabs">',
  '<ul>',
    '<li><a href="#tab_1"><span>One</span></a></li>',
    '<li><a href="#tab_2"><span>Two</span></a></li>',
  '</ul>',
  '<div id="tab_1">',
     '<p>Marker i:"</p>'+
     '<form id='button'>'+
       '<div>'+
         '<input type='submit' value='Submit' />'+
       '</div>'+
     '</form>',
  '</div>',
  '<div id="tab_2">',
    '<p>Info: '+checkText+'</p>',
  '</div>',
  '</div>'
].join('');

А затем прослушиватель событий:

google.maps.event.addListener(infoWindow, 'domready', function() {
  $("#tabs").tabs();
});

google.maps.event.addListener(marker, 'click', function(event) {
  infoWindow.setContent(content);
  infoWindow.open(map, marker);
});

Отлично отображаются вкладки и кнопка, но я не знаю, как связать ее с действием, например:

marker.draggrable = true;  // letting the marker to move
checkText =  marker.getPosition();  // changing the tab info whenever marker moves

Я предполагаю, что эта проблема связана не с jquery-tabs, а с любым информационным окном с html-формой внутри. Спасибо.

//-------------------------

Упрощу свой вопрос.

Я подготовил этот пример, в котором вы можете найти «кнопку» в информационном окне: http://www.sipa.es/prueba_fer/index_prueba.html

Как я могу связать действие с этой кнопкой? Например, изменение масштаба, открытие нового окна и т. Д.

Спасибо


javascript google-maps-api-3 infowindow jquery-ui-tabs
person user1024047    schedule 01.11.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У объекта-маркера есть события перетаскивания:

  • перетаскивание: это событие многократно запускается, пока пользователь перетаскивает маркер.
  • dragend: это событие запускается, когда пользователь прекращает перетаскивать маркер.
  • draggable_changed: это событие запускается при изменении свойства перетаскивания маркера.
  • dragstart: это событие запускается, когда пользователь начинает перетаскивать маркер.

Затем обновите свой контент, когда событие сработает.

google.maps.event.addListener(marker, 'dragend', function(event) {
    checkText = this.getPosition();
    content = [
        '<div id="tabs">',
                '<ul>',
                    '<li><a href="#tab_1"><span>One</span></a></li>',
                    '<li><a href="#tab_2"><span>Two</span></a></li>',
                '</ul>',
            '<div id="tab_1">',
                '<p>Marker i:"</p>'+
                '<form id="button">'+
                    '<div>'+
                        '<input type="submit" value="Submit" />'+
                    '</div>'+
                '</form>',
            '</div>',
                '<div id="tab_2">',
                    '<p>Info: '+checkText+'</p>',
                '</div>',
        '</div>'
    ].join('');  

});

ОБНОВЛЕНИЕ:

Хорошо, вам нужно убедиться, что вы улавливаете элементы в информационном окне, когда они прикреплены к DOM. Инфоокна имеют domready событие. Я обновил функцию в вашем примере, чтобы показать это. Также помните, что обратная передача сбросит карту. Вы не сказали, нужен ли вам ответный пост, поэтому я отменил его с помощью e.preventDefault();

(function () {
     var marker = new google.maps.Marker({
          map: map,
          draggable: false,
          position: new google.maps.LatLng(40.30, -3.71)
     });
     var content = "<div id='tabs'>" +
                   "<form id='button'>" +
                   "<div>" +
                   "<input id='btn' type='submit' value='Submit'/>" +
                   "</div>" +
                   "</form>" +
                   "</div>";

     google.maps.event.addListener(marker, 'click', function (event) {
            infoWindow.setContent(content);
            infoWindow.open(map, this);
            map.setCenter(this.getPosition());

     });    

     google.maps.event.addListener(infoWindow, 'domready', function (e) {
           //attach the click event to the button.
           document.forms.button.btn.onclick = function (e) {
                e.preventDefault(); //cancels the post back.
                var currentZoomLevel = map.getZoom();
                map.setZoom(currentZoomLevel - 2); //zoom out two levels
            };    
     });   

})();
person Bryan Weaver    schedule 02.11.2011
comment
Спасибо, но это не моя проблема, я добавил несколько пояснений и пример к своему вопросу ... - person user1024047; 05.11.2011
comment
Отлично, работает! Не знал, что такое обратная передача, я не программист, и мне нужно время, чтобы усвоить некоторые концепции. Большое спасибо за полезный ответ. - person user1024047; 08.11.2011