javascript - 如何在谷歌地图信息窗口中放置 html div

Question

我有一个用 JavaScript 编写的谷歌地图应用程序。我单击 map 中的一个区域来创建一个信息窗口。

在此信息窗口中，我想链接 html 文件中的 div。这样我就可以使用 jquery 向 div 添加函数和事件。

在信息窗口中，我希望出现字符串“details...”，并且当单击它时，要执行一些函数。 (例如简单的警报)

在我的 JS 中:

...
...
google.maps.event.addListener(ccg_area[j], 'click', showTB);
...
function showTB(event) {

    var contentString = #details;        //somehow I want to link this to details div


    infoWindow.setContent(contentString);

    infoWindow.open(map);
}

在我的html中:

<div id="map-canvas">
    <div id="details">details...</div>
</div>

Answer 1

您可以使用类似以下内容的方法来获取给定 div 的内容:

/*
* @return google.maps.InfoWindow
* @global $
*/

function showTB(event) {
    // jQuery object containing the div
    var $details = $("#details");
    // $details[] is the actual DOM node
    infoWindow.setContent($details[0]);
    infoWindow.open(map);
    infoWindow.$details = $details;
    return infoWindow;
}

// Delegate click events on links in div
infoWindow.$details.live('click','a', function(){
  alert('You´re not going anywhere!');
  return false;
}); 

添加:

---

确保您的代码在 DOM 时运行准备好了。否则你的选择器将返回 nil。

$(document).ready(function(){
  console.log($('#details'));
});