谷歌地图地图下的具体化标签

Question

>我试图通过动态更改内容来创建一个看起来很快的网站，所以我使用选项卡系统表单具体化，一切都很好，除了我的谷歌地图地图通过 api 生成显示为空白窗口： 地图

当我调整窗口大小时，或者如果页面处于活动状态，则活动不是解决方案时，它会显示地图！

提前感谢可能的解决方案/修复

我创建了这个JSFiddle来展示它：https://jsfiddle.net/8ajob4ja/

.html：

<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s6"><a href="#test1">Test 1</a></li>
<li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
</ul>
</div>
<div id="test1" class="col s12">           
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
</div>
<div id="test2" class="col s12">
2
</div>
</div>   

.js：

function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}

.css：

#map {
height: 400px;
width: 100%;
}

Answer 1

请尝试此代码。因为谷歌在执行脚本时直接调用initMap()所以当时由于某种原因地图对象没有初始化，所以出于这个原因，我们需要像这样调用initMap()。

从 js 链接中删除&callback=initMap，使其如下所示。

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>

在选项卡中添加类。

<li class="tab col s6 test"><a href="#test1">Test 1</a></li>

将你的 jquery 替换为此代码。

$(".test").click(function () {initMap();});
function initMap() {
var uluru = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}

希望这有帮助。

Answer 2

您需要在选项卡变为活动状态(并且地图具有大小(后触发地图上的resize事件。

$('ul.tabs').on('click', 'a', function(e) {
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
}, 500);
});

代码片段：

function initMap() {
var uluru = {
lat: -25.363,
lng: 131.044
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
$('ul.tabs').on('click', 'a', function(e) {
setTimeout(function() {
google.maps.event.trigger(map, 'resize');
}, 500);
});

#map {
height: 400px;
width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" rel="stylesheet" />
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s6"><a href="#test1">Test 1</a></li>
<li class="tab col s6"><a href="#test2" class="active">Test 2</a></li>
</ul>
</div>
<div id="test1" class="col s12">
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
</div>
<div id="test2" class="col s12">
2
</div>
</div>