javascript 使用 JQuery Mobile 和 jquery-ui-map 的 Google 地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16914048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google maps with JQuery Mobile and jquery-ui-map
提问by Matthijs
I'm using the jQuery UI Map libary (https://code.google.com/p/jquery-ui-map/) to display a map on my html5 mobile website, however i'm only getting a grey square no matter what i try.
我正在使用 jQuery UI Map libary ( https://code.google.com/p/jquery-ui-map/) 在我的 html5 移动网站上显示地图，但是无论如何我都只得到一个灰色方块我尝试什么。
My code:
我的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>test</title>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="https://local url/js/jquery-ui.js"></script>
<script type="text/javascript" src="https://local url/js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<canvas id="map_canvas" style="width:50%;height:50%"></canvas>
</p>
</div>
</div>
<script>
$(document).ready(function()
{
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</body>
</html>
The result i get is this:
我得到的结果是这样的：
http://upload.mattie-systems.nl/uploads/28217-knipsel.png
http://upload.mattie-systems.nl/uploads/28217-knipsel.png
Any help would be greatley appreciated!
任何帮助将不胜感激！
回答by Gajotres
Solution
解决方案
Map can't be shown on canvas element, it must be DIV like this:
地图不能显示在画布元素上，它必须是这样的 DIV：
<div id="map_canvas"></div>
Also don't use percentages for map height, ether use px, em or use css like in my example to fill working page.
也不要使用百分比作为地图高度，以太使用 px、em 或使用 css 就像我的例子一样来填充工作页面。
Working HTML :
工作 HTML ：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
<style>
#map_canvas {
position: absolute;
top: 0;
bottom: 0;
left:0;
right:0;
}
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
<script>
$(document).on('pageshow', '#main', function() {
$('#map_canvas').gmap();
$('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });
$('#map_canvas').gmap({ 'zoom': 8 });
$('#map_canvas').gmap('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="content">
<p>
TEST SITE
</p>
<p>
<div id="map_canvas"></div>
</p>
</div>
</div>
</body>
</html>
If you want to find more about this topic + examples then take a look at this ARTICLE.
如果您想了解有关此主题的更多信息 + 示例，请查看这篇文章。
