这是我的问题:我希望当你点击标记时你没有看到infowindow(我知道怎么做),但是你看到另一个页面显示为对话框(http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/page-dialogs.html) 或者一个弹出窗口(http://jquerymobile.com/demos/1.2.0-alpha.1/docs/pages/popup/index.html#&ui-state=dialog)in jquery mobile,我尝试了很多解决方案,但它没有用。
以下是示例代码:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Info windows</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString = 'something html code';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Uluru (Ayers Rock)'
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
答案 0 :(得分:0)
我添加了一个示例示例。单击标记时,将显示对话框页面。解决方法是使用一个不可见的锚点打开对话框并通过JavaScript单击它。
<!DOCTYPE html>
<html>
<head>
<title>Google Map Dialog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"></script>
<script>
function initialize() {
var mapCenter = new google.maps.LatLng(59.3426606750, 18.0736160278),
myOptions = {
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: mapCenter
},
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: mapCenter,
map: map,
title: 'Stockholm'
});
google.maps.event.addListener(marker, 'click', function () {
$('#dialog-anchor').click();
});
}
$(document).on("pageinit", "#home-page", function () {
initialize();
});
</script>
</head>
<body>
<!-- /page -->
<div data-role="page" id="home-page">
<!-- /header -->
<div data-role="header" data-theme="c">
<h1>Google Map Dialog</h1>
</div>
<!-- /content -->
<div data-role="content" class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:300px;"></div>
<a href="#generic-dialog" id="dialog-anchor" style="display:none" data-rel="dialog">Open dialog</a>
</div>
</div>
<!-- /page -->
<div data-role="page" id="generic-dialog">
<!-- /header -->
<div data-role="header" data-theme="d">
<h1>Generic Dialog</h1>
</div>
<!-- /content -->
<div data-role="content" data-theme="c">
<h1>Dialog</h1>
<p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
</div>
</div>
</body>
</html>
我希望这会有所帮助。