*嗨,我是整个谷歌地图 api 环境的新手,所以请指导我。
我在下面尝试实现的是从 XML 文件或 JSON 文件中提取数据并将位置绘制到 Google 地图上。我还尝试添加一个信息窗口,它将显示每个位置的不同信息。我知道要有一个信息窗口,我必须创建一个覆盖。但问题是我如何实际将多个信息窗口标记到它们的标记上?
所有标记都很好地显示在地图上,但问题是当我单击查看信息窗口时 - 信息窗口始终显示在同一个标记上。有什么问题?
到目前为止,这是我想出的,如果有人能够发现这个问题,我将不胜感激。
<!DOCTYPE html>
<html>
<head>
<style>
html, body, #map_canvas { margin: 0; padding: 0; height: 100%; }
</style>
<script
src="https://maps.googleapis.com/maps/api/js sensor=false&libraries=visualization">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 5,
center: new google.maps.LatLng(-27.48939, 153.012772),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/geojsonp/2.5/week';
document.getElementsByTagName('head')[0].appendChild(script);
}
window.eqfeed_callback = function(results) {
for (var i = 0; i < results.features.length; i++) {
var earthquake = results.features[i];
var coords = earthquake.geometry.coordinates;
var latLng = new google.maps.LatLng(coords[1],coords[0]);
var marker = new google.maps.Marker({
position: latLng,
map: map,
});
var infowindow = new google.maps.InfoWindow({
content: "<div>Hello! World</div>",
maxWidth:100
});
google.maps.event.addListener(marker, "mouseover", function() {
infowindow.open(map, marker);
});
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
</html>