谷歌地图只加载一半的部分，我已经在地图上使用了一些额外的javascript效果，但是它只加载了一半 [英] google map only loads half of its portion,i have used some extra javascript for some effects on the map but its only loading half
问题描述
我尝试对Google地图使用某些隐藏/显示功能，其中最初显示了地图的特定部分，然后单击按钮后整个地图都显示了.一切正常，但是当我单击按钮时并尝试查看整个地图，只显示了一半的地图，另一半则覆盖了一些灰色.这是代码
i have tried to use some hide/show functionality to my google map where a certain portion of the map is showed initially and after clicking on a button the whole map shows up.everything is working fine but when i click on the button and try to see the whole map,only half of the map shows up and the other half is covered with some gray color.here is the code
<html>
<head>
<style>
#thediv {
height: 100px;
}
</style>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var locations = [
['Nepcreation,sydney branch', -33.867487, 151.20699, 3],
['Nepcreation,kaulalampur branch', 3.140345, 101.689206, 2],
['Nepcreation,kathmandu', 27.689390, 85.335494, 1]
];
var map = new google.maps.Map(document.getElementById('thediv'), {
zoom: 2,
center: new google.maps.LatLng(27.689390, 85.335494),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="thediv" class="reveal-closed"></div>
<input type="submit" onClick="gmap()">
<script>
function gmap(){
var x=document.getElementById("thediv");
if(x.style.height=="100px"){
x.style.height="600px";}
else{
x.style.height="100px";
}
}
</script>
</body>
</html>
推荐答案
这是许多用户(包括我自己)面临的常见问题.
This is a common problem faced by many users(including myself).
首先，您已在给定的维度(auto x 100px)中初始化了Google地图，并在此维度下将地图图像(称为图块)加载到其中.
First you have initialized the Google maps within given dimension(auto x 100px), based on it the map images(called as tiles) are loaded into it.
然后根据button的 click 更改尺寸(auto x 600px)，因此不会呈现 Google图片的多余部分，而是显示只有灰色区域.为了解决这个问题，您要做的就是触发如下所述的resize事件
Then based on the button 's click you're changing it dimension (auto x 600px) therefore the excess part of Google images are not rendered but showing only the grey area. In order to fix it what you have to do is to trigger the resize event as mentioned below
google.maps.event.trigger(map, "resize");
在您的代码中，映射变量的作用域位于initialize()之内，而按钮的click事件则调用gmap().因此，让map变量保持为 global ，然后遵循以下代码:
In your code, the map variable is scoped within the initialize() whereas the click event of button calls gmap(). So lets keep the map variable as global and then follow the below code:
function gmap() {
var x = document.getElementById("thediv");
if (x.style.height == "100px") {
x.style.height = "600px";
} else {
x.style.height = "100px";
}
google.maps.event.trigger(map, "resize");
}
PS:为了向这个新用户提供详细的说明，我添加了它作为答案，而不是将其标记为重复.
这篇关于谷歌地图只加载一半的部分，我已经在地图上使用了一些额外的javascript效果，但是它只加载了一半的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
