Gmap基本地图显示
Posted
技术标签:
【中文标题】Gmap基本地图显示【英文标题】：Gmap basic map display 【发布时间】：2013-06-17 02:11:32 【问题描述】：我正在尝试使用 gmap3 JQuery 插件在我的 html 文件上设置基本地图，但是当我刷新页面时总是什么都没有。这是我的代码：http://pastie.org/8062410 它在此链接上说明了如何设置，通常它只是一个 JQuery 行：http://gmap3.net/en/catalog/9-map/map-32
有人可以帮我找出我的代码发生了什么吗？感谢您的帮助！
我回到这个话题是因为 JQM + Google Map API V3 还存在其他问题。我想创建一个带有简单标题的全屏谷歌地图，其中包含我的徽标和一个用于打开右侧 JQM 面板的小按钮。这是我的代码，它显示一个 JQM 标题 + 打开面板按钮（它有效！）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEST</title>
<link rel="stylesheet" href="themes/default-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3. /jquery.mobile.structure-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="https://maps.googleapis.com/maps/api/js?k&sensor=false"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="./gmap3v5.1.1/gmap3.min.js"></script>
<script src="./js/load-map.js"></script>
</head>
<body>
<div data-role="page" id="interface">
<div data-role="header">
<div id=logo>
<img src="../../images/logo.png" >
</div>
<a href="#openPanel">Panel</a>
</div>
<div data-role="content">
<div id="openPanel" data-role="panel" data-position="right" data-display="overlay">
<ul data-role="listview" data-theme="e">
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
</ul>
</div>
<script>
$("#map-page").gmap3();
</script>
</div>
</div>
但 Google 地图从未全屏显示，有时它会隐藏我的标题。有人可以告诉我我的 DOM 有什么问题吗？感谢您的帮助！
【问题讨论】：
请在此处发布您的代码，也许您缺少 google map apikey?
感谢您的评论，我添加了我的 API 密钥，只是我把它留给这个 sn-p。
哦，您使用的是 jQM。 #test 在你的代码中在哪里？
是的，我不知道是不是JQM的，但很奇怪！
您想在 div 中显示地图，id 为 #test，但它不存在。
【参考方案1】：
缺少测试 div。下面的代码工作正常。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gmap3 test</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
<script type="text/javascript" src="gmap3.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<div id="test" style="width:500px;height:500px;">
</div>
<div data-role="content">
<script>
$("#test").gmap3(
map:
address:"POURRIERES, FRANCE",
options:
zoom:4,
mapTypeId: google.maps.MapTypeId.SATELLITE,
mapTypeControl: true,
mapTypeControlOptions:
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
,
navigationControl: true,
scrollwheel: true,
streetViewControl: true
);
</script>
</div>
</div>
</body>
</html>
【讨论】：
@Katcha - 我在 Firefox 和 chrome 中验证了它。它工作正常。你能告诉你检查哪个浏览器和版本吗？ @Katcha：你是否包含了 jquery 库。在我的代码中，我添加了 1.7.2 用于测试目的。你是否正确包含它。 只需复制我的代码并将其放在 html 文件中，并正确包含 gmap 和 jquery js 文件。当然，它会起作用的。 satfish，谢谢伙计，它现在工作正常，这是我的 JQuery 库包含一个奇怪的错误，再次感谢！ 这将永远无法在 jQuery Mobile 上正常工作。更准确地说，即使您将宽度和高度更改为 100%，此解决方案也永远不会覆盖全屏。以上是关于Gmap基本地图显示的主要内容，如果未能解决你的问题，请参考以下文章
使用 MySQL、JSON 和 jQuery 插件 Gmap3 填充 Google 地图标记