Javascript jQuery ui映射不适用于jQuery Mobile
我只是在这里查看jquery ui映射的演示 这正是我试图实现的，它非常基本，我只是按照示例中的方法做了，但似乎不起作用，我在Chrome桌面浏览器上测试了它 资料来源如下：Javascript jQuery ui映射不适用于jQuery Mobile,javascript,jquery,jquery-mobile,google-maps-api-3,jquery-ui-map,Javascript,Jquery,Jquery Mobile,Google Maps Api 3,Jquery Ui Map,我只是在这里查看jquery ui映射的演示 这正是我试图实现的，它非常基本，我只是按照示例中的方法做了，但似乎不起作用，我在Chrome桌面浏览器上测试了它 资料来源如下： <!DOCTYPE html > <html > <head> <title>Map Search Page</title> <meta name="HandheldFriendly" content="True"> <m
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
地图搜索页面
html{高度：100%}
正文{高度：100%；边距：0px；填充：0px}
#地图{高度：100%；宽度：100%；}
var mobileDemo={'center'：'57.7973333,12.0502107'，'zoom'：10}；
$（'#home'）.live（“pageinit”，函数（）{
$（'map'）.gmap（{'center'：mobileDemo.center，'zoom'：17}）；
//$（“#map”）.gmap（'addMarker'，{'position'：mobileDemo.center，'animation'：google.maps.animation.DROP}）；
});
$（'#home'）.live（'pageshow'，function（）{
$（'#map'）.gmap（'refresh'）；
});
多色评级
版权所有&复印件；2012
有一点很重要，当我给map div加上一些高度时，它会显示静态的map图像。刚刚开始工作，源代码很好。出现问题，因为jQuery Mobile Map响应触摸事件 默认情况下，Chrome中的触摸事件未启用，因此只需在Chrome控制台中启用触摸事件即可。