使用jQuery mobile，google maps API v3将infoWindow添加到地图标记 [英] Add infoWindow to a map marker using jQuery mobile, google maps API v3
问题描述
我有一个简单的脚本，当您使用jQuery mobile和Google Maps API v3单击按钮时，会在地图上添加一个标记。我想为该标记添加一个基本的infoWindow，以便当你点击它时，它会显示Hello World。
I have a simple script that adds a marker on a map when you click a button using jQuery mobile and the Google Maps API v3. I want to add a basic infoWindow to that marker, so that when you click on it, it says "Hello World".
这看起来应该很简单，但我似乎无法得到正确的语法。我添加了这样的标记
This seems like it should be very easy, but I can't seem to get the syntax correct. I'm adding markers like this
$('#map_canvas').gmap('addMarker', { 'position': chicago } );
我似乎无法找到任何好的示例，您还设置了infowindow up the marker。
and I can't seem to find any good examples where you also setup an infowindow when you also set up the marker.
这是我的代码。如果保存在 jquery-ui-map-3.0-rc\demos\ 目录中，则所有路径都将是正确的。当您点击添加更多标记时， chicago 位置中的标记将添加到地图中。我希望能够点击该标记并弹出一个信息窗口，显示Hello World！。
Here is my code. If you save in the jquery-ui-map-3.0-rc\demos\ directory, then all the paths will be correct. When you click 'Add Some More Markers', a marker in the chicago location is added to the map. I want to be able to click on that marker and have an info window pop up that says "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（ ））{} 到以下内容，标记甚至不会再显示出来。
If I change the code inside $(document).ready(function()){} to the following, the marker doesn't even show up anymore.
$(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);
});
}});
});
});
推荐答案
我已添加请求的开放式信息窗口。请检查以下代码：
I have added the requested open info window. Please check the below code:
<!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>
这篇关于使用jQuery mobile，google maps API v3将infoWindow添加到地图标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
