#javascript #jquery #google-maps #google-maps-api-3
#javascript #jquery #google-карты #google-maps-api-3
Вопрос:
Я пытаюсь выбрать, <div>
используя jquery $('#divname')
, внутри информационного блока, который Google Maps генерирует при нажатии на любой из множества маркеров на карте.
Проблема: Когда я пытаюсь получить доступ к div с помощью $("#gallery")
после нажатия на маркер, иначе говоря, внутри прослушивателя событий щелчка этого маркера, ничего не происходит. Я попытался получить html, содержащийся в этом div, из прослушивателя кликов, используя console.log($("#gallery").html())
и он возвращает null
!! Как я могу выбрать этот div!?
Щелкните фрагмент кода прослушивателя событий
// Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
infoboxes[this._index].open(map, markers[this._index]);
infoboxes[this._index].show();
console.log($('#gallery').html());
});
Фрагмент кода информационного блока
for( i = 0; i < json.length; i ) {
// Place markers on map
var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
var marker = new google.maps.Marker({
position: latLng,
map: map
});
markers.push(marker);
// Create infowindows
var boxText = '<div id="infobox">
<div id="infobox_header_title">
<span id="infobox_header_price">$' json[i].price '</span>
<span id="infobox_header_room">' json[i].bedroom 'br </span>
<span id="infobox_header_address">' json[i].address_1 '</span>
</div>
<div id="gallery">
<img src="images/cl/' json[i].photos[0] '.jpg" />
<img src="images/cl/' json[i].photos[1] '.jpg" />
</div>
</div>';
var infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
},
closeBoxMargin: "10px 2px 2px 2px",
closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: true,
pane: "floatPane",
enableEventPropagation: false
};
var infobox = new InfoBox(infoboxOptions);
infoboxes.push(infobox);
//<Click Event Listener code comes in here>
Ответ №1:
Из того, что я вижу, вы добавляете маркеры в цикле? Итак, вы используете один и тот же идентификатор для InfoWindow каждого маркера, и это противоречит правилам HTML / JS / CSS иметь более одного элемента с одинаковым идентификатором, и это нормально для сбоя. Что бы я сделал, так это вместо этого использовал только классы для своих маркеров, а в прослушивателе событий вы могли бы получить содержимое .gallery div следующим образом (не пробовал, но вы должны понять, если это не сработает):
// Create Listeners
markers[i]._index = i;
google.maps.event.addListener(markers[i], 'click', function() {
infoboxes[this._index].open(map, markers[this._index]);
infoboxes[this._index].show();
console.log($(infoboxes[this._index].getContent()).find('.gallery'));
});