InfoWindows不是唯一的，google maps API v3，jquery mobile [英] InfoWindows are not unique, google maps API v3, jquery mobile
本文介绍了InfoWindows不是唯一的，google maps API v3，jquery mobile的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个简单的程序，希望在其中发生以下情况:
I have a simple program where I want the following to happen:
- 单击向地图添加一些标记"，将显示4个标记，这些标记在
cityList数组中指定. - 单击一个标记，它将打开并打开infoWindow并在
cityList数组中显示相应的索引.因此，如果单击与cityList[0]相对应的标记，它将在infoWindow中显示为"0".
- Click "Add Some Markers to Map", will show 4 markers with the locations specified in the
cityListarray. - Click on a marker and it will open up and infoWindow and display the corresponding index in the
cityListarray. So if you click on the marker corresponding tocityList[0], it will show you "0" in the infoWindow.
我可以添加标记并添加infoWindows，但是infoWindows中的内容不正确.首先，它们都是相同的，其次，它们在循环末尾显示迭代器i的值.
I can add the markers and add the infoWindows, but the content in the infoWindows are incorrect. First of all, they are all the same, and secondly the are displaying the value of the iterator i at the end of the loop.
我的问题是
- 我该如何解决?
- 我已经尝试使用地图的全局变量来实现相同的代码，但是它不起作用.为什么不?例如，如果我替换
function initialize()
{
$('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
}
使用
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById("map_canvas"), {'center': city0, 'zoom': 7, 'disableDefaultUI':false } );
}
然后，当我加载页面时，地图甚至都不会显示.
then the map doesn't even show up when I load the page.
这是我的代码:
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var city0 = new google.maps.LatLng(41.850033,-87.6500523);
var city1 = new google.maps.LatLng(41,-87);
var city2 = new google.maps.LatLng(41.5,-87.5);
var city3 = new google.maps.LatLng(41.4,-87.2);
var cityList = [city0, city1, city2, city3];
function initialize()
{
$('#map_canvas').gmap({ 'center': city0, 'zoom': 7, 'disableDefaultUI':false });
}
$(document).ready(function()
{
initialize();
$('.add-markers').click(function() {
for(var i=0; i<cityList.length; i++){
$('#map_canvas').gmap('addMarker', { 'position': cityList[i] } ).click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': i.toString()}, this);
});
}
});
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
</div>
</div>
<div id="info-page" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">more info v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="info_page" style="height:350px;"></div>
</div>
<div id="moreInfo"></div>
</div>
</body>
</html>
推荐答案
我明白你的意思了.您使用jquery-ui-maps插件在具有唯一infoWindows的标记列表中遇到的问题是正确的.
I see your point. You were right about the problems in creating a list of markers with unique infoWindows using the jquery-ui-maps plugin.
为了克服这些问题，我在每个$ marker定义中创建了一个唯一的id(id:i)，并且该id等于名为i的for循环索引.在click事件中，我从标记的ID中知道了正确的索引，并且我正在使用它来检索正确的cityList值.
To overcome these problems I'm creating a unique id (id: i) in each $marker definition and the id is equal to the for loop index named i. In the click event I know the correct index from the marker's id and i'm using it to retrieve the correct cityList value.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.min.js"></script>
<script type="text/javascript">
var chicago = new google.maps.LatLng(41.850033,-87.6500523),
mobileDemo = { 'center': '41,-87', 'zoom': 7 },
cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
function initialize()
{
$('#map_canvas').gmap({ 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false });
}
function addMarkers()
{
for (var i = 0; i < cityList.length; i++)
{
var $marker = $('#map_canvas').gmap('addMarker', {id: i, 'position': new google.maps.LatLng(cityList[i][1], cityList[i][2]), title: cityList[i][0]});
$marker.click(function() {
$('#map_canvas').gmap('openInfoWindow', {'content': cityList[this.id][0]}, this);
});
}
}
$(document).on("pageinit", "#basic-map", function() {
initialize();
});
$(document).on('click', '.add-markers', function(e) {
e.preventDefault();
addMarkers();
});
</script>
</head>
<body>
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
<a href="#" class="add-markers" data-role="button" data-theme="b">Add Some More Markers</a>
</div>
</div>
</body>
</html>
这篇关于InfoWindows不是唯一的，google maps API v3，jquery mobile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
