如何在Google Maps InfoBox中访问Div？ [英] How to Access a Div inside Google Maps InfoBox?

问题描述

我试图用jquery的 $（'＃divname'）选择一个< div> 当地图上的任何多个标记点击时，Google Maps会生成信息框。

问题：当我尝试使用div $（＃gallery）标记点击后，即在该标记的点击事件侦听器内部，没有任何反应。我尝试使用 console.log（$（＃gallery）。html（））从click监听器获取该div中包含的html，并返回空 !!如何选择这个div！？

点击事件监听器代码片段

  //创建监听器
 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（））; 
  

}）;

信息摘要代码

b
$ b

  for（i = 0; i< json.length; i ++）{
 
 //将标记放置在地图
 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）; 
 
 //创建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> \ 
  < / 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（信息框）; 
 
 //< Click事件监听器代码在这里> 
  

解决方案

循环？因此，对每个标记的infoWindow使用相同的ID，并且违反HTML / JS / CSS规则，使其具有相同ID的一个元素，并且这是正常的失败。我会做的只是使用类作为我的标记，而在事件监听器中，你可以像这样获得.gallery div的内容（还没有尝试过，但如果它不起作用，你应该明白）：

  //创建听众
 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'））; 
 
}）; 
  

I am trying to select a <div> using jquery's $('#divname') inside a infobox that Google Maps generate when any of the many markers on the map are clicked on.

Problem: When I try to access the div using $("#gallery") after the marker has been clicked on, aka inside the click event listener of that marker, nothing happens. I tried getting the html contained in that div from the click listener using console.log($("#gallery").html()) and it returns null!! How can I select this div!?

Click Event Listener Snippet Code

// 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());

});

Infobox Snippet Code

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>

解决方案

From what I see, you are adding markers in a loop? So, you use same ID for each marker's infoWindow and it is against HTML/JS/CSS rules to have over one element with same ID and it's normal to fail. What I would do is instead use only classes for my markers and in the event listener you could get the content of the .gallery div like this (have not tried but you should get the idea if it doesn't work):

// 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'));

});

这篇关于如何在Google Maps InfoBox中访问Div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！