带有多个标记的信息窗口中的小部件答案

【问题标题】：Widget in info window with multiple markers带有多个标记的信息窗口中的小部件
【发布时间】：2012-06-19 08:44:19
【问题描述】：

我正在尝试使用 Google Maps API 创建一个包含大量标记和信息窗口的地图。我可以得到一张地图来显示大量的标记和信息窗口，或者使用脚本中的位置或从文件中加载它们。

我想做的是把这段代码：

<script type="text/javascript" src="http://www.tidetimes.org.uk/aberdaron-tide-times.js"></script>

进入信息窗口，因此标记将位于该位置，单击信息窗口时会显示潮汐时间。

我找不到任何方法可以在信息窗口中使用它。任何人都可以帮忙吗？谢谢

【问题讨论】：

标签： javascript google-maps google-maps-api-3 infowindow openinfowindowhtml

【解决方案1】：

对不起，我不完全明白你在说什么。 “我想要做的是将此代码放入信息窗口中，以便标记将位于该位置，并且单击信息窗口时会显示潮汐时间。”您到底是什么意思？

首先，您不需要在信息窗口中编写代码来为标记提供位置。这是标记的标准属性之一。

其次，我几乎可以肯定您的信息窗口中不能有事件（代码）。您可以做的是，当用户单击标记时，地图将放大或缩小。稍后您可以在该标记上设置另一个事件。

也许这会对您的答案有所帮助（取自 Google Maps API 文档）

“InfoWindow 的内容可能包含文本字符串、HTML 的 sn-p 或 DOM 元素本身。”

【讨论】：

【解决方案2】：

您需要将 html 添加到信息窗口..

See the documentation

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
    'sandstone rock formation in the southern part of the '+
    'Northern Territory, central Australia. It lies 335 km (208 mi) '+
    'south west of the nearest large town, Alice Springs; 450 km '+
    '(280 mi) by road. Kata Tjuta and Uluru are the two major '+
    'features of the Uluru - Kata Tjuta National Park. Uluru is '+
    'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
    'Aboriginal people of the area. It has many springs, waterholes, '+
    'rock caves and ancient paintings. Uluru is listed as a World '+
    'Heritage Site.</p>'+
    '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
    'http://en.wikipedia.org/w/index.php?title=Uluru</a> (last visited June 22, 2009).</p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

编辑

在进一步检查您的代码和您的网站后，我相信您在问如何通过单个文件注入时间和日期。

我的建议是使用从服务器端代码返回的 JSON 对象，遍历 json 对象并为弹出窗口使用模板。

如果您好奇，可以参考我们在http://demo.mapitusa.com 做的类似事情，您可以轻松浏览源代码并找到所需的 js 文件并查看工作示例。

【讨论】：