使用 jQuery mobile、google maps API v3 将 infoWindow 添加到地图标记
Posted
技术标签:
【中文标题】使用 jQuery mobile、google maps API v3 将 infoWindow 添加到地图标记【英文标题】：Add infoWindow to a map marker using jQuery mobile, google maps API v3 【发布时间】：2012-08-18 11:49:44 【问题描述】：我有一个简单的脚本，当您使用 jQuery mobile 和 Google Maps API v3 单击按钮时，它会在地图上添加一个标记。我想为那个标记添加一个基本的 infoWindow，这样当你点击它时，它会显示“Hello World”。
这看起来应该很容易，但我似乎无法正确地获取语法。我正在添加这样的标记
$('#map_canvas').gmap('addMarker', 'position': chicago );
我似乎找不到任何很好的例子，你在设置标记的同时还设置了一个信息窗口。
这是我的代码。如果保存在jquery-ui-map-3.0-rc\demos\ 目录中，那么所有路径都是正确的。当您单击“添加更多标记”时，chicago 位置的标记将添加到地图中。我希望能够单击该标记并弹出一个显示“Hello World！”的信息窗口。
<!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 chicago = new google.maps.LatLng(41.850033,-87.6500523);
var mobileDemo = 'center': '41,-87', 'zoom': 7 ;
var cityList = [];
function initialize()
$('#map_canvas').gmap( 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false );
$(document).ready(function()
initialize();
$('.add-markers').click(function()
$('#map_canvas').gmap('addMarker', 'position': chicago );
);
);
</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>
如果我将$(document).ready(function()) 中的代码更改为以下代码，则标记甚至不再显示。
$(document).ready(function()
initialize();
$('.add-markers').click(function()
//$('#map_canvas').gmap('addMarker', 'position': chicago, 'content': "Hello World!" );
$('#map_canvas').gmap('callback': function()
var self = this;
self.addMarker('position': chicago ).click(function()
self.openInfoWindow( 'content': 'Hello World!' , this);
);
);
);
);
【问题讨论】：
【参考方案1】：我已添加请求的打开信息窗口。请检查以下代码：
<!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 ;
function initialize()
$('#map_canvas').gmap( 'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':false );
$(document).on("pageinit", "#basic-map", function()
initialize();
);
$(document).on('click', '.add-markers', function(e)
e.preventDefault();
$('#map_canvas').gmap('addMarker', 'position': chicago ).click(function()
$('#map_canvas').gmap('openInfoWindow', 'content': 'Hello World!', 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>
</body>
</html>
不带 jQuery-ui-maps 插件的示例：
<!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">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
],
demoCenter = new google.maps.LatLng(41,-87),
map;
function initialize()
map = new google.maps.Map(document.getElementById('map_canvas'),
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
);
function addMarkers()
var marker,
i,
infowindow = new google.maps.InfoWindow();
for (i = 0; i < cityList.length; i++)
marker = new google.maps.Marker(
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
);
google.maps.event.addListener(marker, 'click', (function(marker, i)
return function()
infowindow.setContent(cityList[i][0]);
infowindow.open(map, marker);
)(marker, i));
$(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>
【讨论】：
谢谢，这个小例子可以工作，但是有没有办法在不使用$('#map_canvas').gmap ... 语法的情况下做到这一点？我怎样才能对地图和标记的全局变量做同样的事情？我自己尝试了一些东西，但它们似乎不起作用。
嗨 Erin，我将用一个新示例更新我的帖子，其中 jquery-ui-map 插件已被删除。因此仅使用 Google Maps API v3。谢谢
谢谢，我对此评论中链接的这个问题还有另一个关注问题，这也解决了全局变量问题，***.com/questions/12099351/…以上是关于使用 jQuery mobile、google maps API v3 将 infoWindow 添加到地图标记的主要内容，如果未能解决你的问题，请参考以下文章
使用 JSON 将 JQuery Mobile 输出到 Google Maps 信息窗口
单击打开 jQuery Mobile 面板小部件时的 Google 地图指针
使用 jQuery mobile、google maps API v3 将 infoWindow 添加到地图标记
用于 Google 地图的 jQuery Mobile 双弹出联系我们页面