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

时间:2012-06-19 08:44:19

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

我正在尝试使用Google Maps API创建包含大量标记和信息窗口的地图。我可以通过脚本中的位置或从文件加载来显示大量标记和信息窗口的地图。

我想要做的是把这段代码:

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

进入信息窗口,以便标记位于该位置,单击时,信息窗口会显示潮汐时间。

我找不到任何方法让它在信息窗口中工作。有人可以帮忙吗?感谢

2 个答案:

答案 0 :(得分:1)

对不起,我不完全明白你在说什么。这是什么意思“我想要做的是将这些代码放入信息窗口,以便标记位于该位置,当点击时,信息窗口显示潮汐时间。”?

首先,您不需要信息窗口中的代码来为标记指定位置。这是标准属性之一。

其次,我几乎可以肯定你的信息窗口里面没有事件(代码)。您可以做的是当用户点击标记时,地图将放大或缩小。你可以稍后在该标记上再举办一次活动。

这可能有助于您的回答(取自Google Maps API文档)

“InfoWindow的内容可能包含一串文本,一段HTML或一个DOM元素本身。”

答案 1 :(得分:0)

你需要将html添加到infowindow ..

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文件,并查看工作示例。