带有谷歌地图的 Jquery 无法正确显示
Posted
技术标签:
【中文标题】带有谷歌地图的 Jquery 无法正确显示【英文标题】：Jquery with google maps is not showing correctly 【发布时间】：2014-01-16 00:05:36 【问题描述】：我试图在网站中绑定 googlemap，但如果我使用 jquery，它不会正确显示地图。
源码如下：
<!DOCTYPE html>
<html>
<head>
<title>Startseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<!-- GoogleMaps !-->
<script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
<script src="./js/jquery.ui.map.full.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
// Also works with: var yourStartLatLng = '59.3426606750, 18.0736160278';
var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
$('#map_canvas').gmap('center': yourStartLatLng);
);
</script>
</head>
<body>
<div data-role="page" id="startseite">
<div data-role="header" data-theme="a">
<h1>Titel</h1>
</div>
<!--<div data-role="main" class="ui-content">!-->
<div data-role="tabs" id="tabs" >
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#one" data-ajax="false" class="ui-btn-active" data-icon="search">tab1</a></li>
<li><a href="#two" data-ajax="false" data-icon="location">Karte</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
Page1
</div>
<div id="two" class="ui-body-d ui-content">
<div style="width: 100%; height: 400px; position: relative" id="map_canvas"></div>
</div>
</div>
</div>
</body>
</html>
所以我收到了这种类型的错误：
我是 GoogleMaps 的新手，如果这是一个简单的问题，我很抱歉，但我找不到解决方案。
【问题讨论】：
地图画布的高度设置为400px，如果您希望它完全占据内容div而不导致页面滚动，您需要根据页面中的可用空间设置高度。 【参考方案1】：延迟地图的初始化，直到第一次显示带有地图的选项卡。
<script type="text/javascript">
$(function()
var map = null;
$("#tabs").on("tabsactivate", function (event, ui)
if ((ui.newPanel.attr('id') == 'two') && !map)
var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
map = $('#map_canvas').gmap('center': yourStartLatLng);
);
);
</script>
jsfiddle
【讨论】：
好的，此解决方案有效，但前提是我将脚本绑定到选项卡区域。为什么我在头部绑定脚本不起作用？ @Kingalione - 它适用于我的头部。我更新了答案中的代码，以准确显示我在 head 部分中的内容。【参考方案2】： $(window).bind("load", function()
ShowMap();
);
只需将所有地图代码放入函数中，并在页面加载后调用它。发生这种情况是因为加载时 jquery 页面延迟。这意味着地图在页面加载之前加载。
【讨论】：
【参考方案3】：您需要在带有地图的选项卡变得可见后初始化谷歌地图。例如：
jQuery(document).ready(function ()
$('[data-icon="location"]').parent().one('click', function () //click on tab link to open tab with map
var yourStartLatLng = new google.maps.LatLng(59.3426606750, 18.0736160278);
$('#map_canvas').gmap('center': yourStartLatLng);
);
);
【讨论】：
以上是关于带有谷歌地图的 Jquery 无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章
无法将谷歌静态地图加载到jquery mobile中的div中