Jquery Google Maps V3 - 信息窗口始终固定为一个标记 [英] Jquery Google Maps V3 - Information window is always fixed to one marker
问题描述
以下是我根据此处给出的示例编写的代码 Google Map V3 Demo
Below is the code I have written based on the example given here Google Map V3 Demo
我的问题是点击任何标记打开信息窗口始终在一个固定点我的意思是如果我有4个标记marker1，marker2，marker3，marker4 ..如果我点击mark1或mark2或mark3或mark4信息窗口始终在marker4处打开，并且还有marker4的信息
My problem is clicking on any mark opening the information window always at one fixed point I mean if I have 4 markers marker1,marker2,marker3,marker4 .. If I click on mark1 or mark2 or mark3 or mark4 the information window is always opening at marker4 and also the info for marker4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery + Google Maps API v3 Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit(){
var centerCoord = new google.maps.LatLng(17.22, 78.29);
var mapOptions = {
zoom: 6,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$.getJSON("mapDB.php", function(mapPoints){
for (var i = 0; i < mapPoints.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(mapPoints[i].latitude,mapPoints[i].longitude),
map: map,
title: "test"+i
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>Test this</h3>"+i
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
});
}
$(function(){
mapInit();
});
</script>
<style type="text/css" media="screen">
img { border: 0; }
#map{
width: 500px;
height: 600px;;
}
#content {
position: fixed;
top: 10px;
left: 800px;
margin: 30px;
}
</style>
</head>
<body>
<div id="container">
<div id="map"></div>
</div>
</body>
</html>
感谢您的帮助
问候
Kiran
Thanks for your help Regards Kiran
推荐答案
我认为你对变量有一些范围问题。没有太多时间深入挖掘。我把这个jsFiddle放在一起： http://jsfiddle.net/rcravens/T7HwX/2/
I think you have some scoping issues with the variables. Not a lot of time to dig deeper. I put together this jsFiddle: http://jsfiddle.net/rcravens/T7HwX/2/
以下是我更新后的代码：
Here is the code that I updated to get it to work:
var count = mapPoints.length;
for (var i = 0; i < count; i++) {
var latlng = new google.maps.LatLng(mapPoints[i].latitude,mapPoints[i].longitude);
var title = "test" + i;
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: title
});
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow();
arrInfoWindows[i] = infowindow;
marker.myHtml = "<h3>Test this " + i + "</h3>";
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.myHtml);
infowindow.open(map, this);
});
}
主要是创建'addListener'。
Mostly in the creation of the 'addListener'.
希望这会有所帮助。
Bob
这篇关于Jquery Google Maps V3 - 信息窗口始终固定为一个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
