谷歌地图没有显示好，直到我调整网页
问题描述：
我想在我的网页上显示一张地图。 在我的网站上，我使用date-filter和data-cat函数。所以我首先隐藏地图。 但我的问题来了，当我点击.submenu04 ul li，地图显示不好。谷歌地图没有显示好，直到我调整网页
wrong display 但是，在我调整网页的大小后，它变得很正常。 after resize
我发现其他问题的解决方案，但它没有奏效。 Embed google map is wrong displayed until resizing webpage 这是一种解决方法吗？
var window_w, window_h;
function menuset(){
var posts = $('.post');
posts.hide();
$(".submenu03 li").click(function() {
// Get data of category
var customType = $(this).data('filter'); // category
console.log(customType);
console.log(posts.length); // Length of articles
$('section.c').css({'display':'block'});
$('.c').show();
posts
.hide()
.filter(function() {
return $(this).data('cat') === customType;
})
.fadeIn(200);
});
}
function maps_set(){
$('#map').css({'width':'500px','height':'500px'});
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(25.08650, 121.535000),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles:
[
{
"featureType": "water",
"elementType": "geometry",
"stylers": [{"color": "#e9e9e9"},{"lightness": 17}]},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [{"color": "#f5f5f5"},{"lightness": 20}]},
{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [{"color": "#ffffff"},{"lightness": 17}]},
{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [{"color": "#ffffff"},{"lightness": 29},{"weight": 0.2}]},
{
"featureType": "road.arterial",
"elementType": "geometry",
"stylers": [{"color": "#ffffff"},{"lightness": 18}]},
{
"featureType": "road.local",
"elementType": "geometry",
"stylers": [{"color": "#ffffff"},{"lightness": 16}]},
{
"featureType": "poi",
"elementType": "geometry",
"stylers": [{"color": "#f5f5f5"},{"lightness": 21}]},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [{ "color": "#dedede"},{"lightness": 21}]},
{
"elementType": "labels.text.stroke",
"stylers": [{"visibility": "on"},{"color": "#ffffff"},{"lightness": 16}]},
{
"elementType": "labels.text.fill",
"stylers": [{"saturation": 36},{"color": "#333333"},{"lightness": 40}]},
{
"elementType": "labels.icon",
"stylers": [{"visibility": "off"}]},
{
"featureType": "transit",
"elementType": "geometry",
"stylers": [{"color": "#f2f2f2"},{"lightness": 19}]},
{
"featureType": "administrative",
"elementType": "geometry.fill",
"stylers": [{"color": "#fefefe"},{"lightness": 20}]},
{
"featureType": "administrative",
"elementType": "geometry.stroke",
"stylers": [{"color": "#fefefe"},{"lightness": 17},{"weight": 1.2}]}
]
};
var map = new google.maps.Map(document.getElementById("map"),mapOptions);
var marker_image = {
url: "images/map_icon.png",
size: new google.maps.Size(20, 33),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(-20, 33),
};
var main_Position = new google.maps.LatLng(25.0774235,121.5454867);
var marker = new google.maps.Marker({
position: main_Position,
map: map,
optimized: false,
// size: new google.maps.Size(20, 32),
icon: marker_image
});
}
}
$(function() {
window_w = $(window).width();
window_h = $(window).height();
menuset();
maps_set();
});@charset "UTF-8";
/* CSS Document */
html, body {
margin: 0;
}
header{
position: fixed;
}
section.c{
/* display: none;*/
margin: 90px 90px 0px 300px;
}
section.others{
/* display: none;*/
margin: 90px 90px 0px 300px;
}
.logo{
position: fixed;
top: 0px;
left: 0px;
padding: 30px 0 30px 90px;
background-color: #fff;
width: 100%;
z-index: 7000;
}
.logo img{
height: 30px;
width: auto;
cursor: pointer;
}
.menu{
position: fixed;
background-color: #fff;
width: 200px;
height: 100%;
z-index: 9000;
padding-left: 90px;
padding-top: 0px;
left: 0;
opacity: 1;
}
.submenu03 ul{
padding:0;
margin: 0 0 30px 0;
}
.submenu03 ul li{
list-style: none;
font-size: 15px;
line-height: 21px;
cursor: pointer;
font-weight:300;
}
.submenu03 ul li:hover{
opacity: 0.5;
}
.submenu03 li a:link,.submenu03 li a:visited{
text-decoration: none;
color: #000;
opacity: 1;
}
.menu_title{
font-size: 20px;
margin-bottom: 10px;
line-height: 18px;
font-weight: 500;
}
.ci ul{
padding: 0;
margin: 0;
}
.ci ul li{
list-style: none;
font-size: 14px;
padding-bottom: 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<body>
<!--header-->
<header class="nav-down">
<div class="logo">LOGO</div>
<div class="menu">
<div class="submenu03">
<ul>
<li data-filter="ar">show the map</li>
<li data-filter="ot">show another page</li>
</ul>
</div>
</div>
</header>
<section class="c">
<div class="ar post" data-cat="ar">
<div class="ci">
<div id="map"></div>
</div>
</div>
</section>
<section class="others">
<div class="ot post" data-cat="ot">
this is another page.
</div>
</section>
<div style="clear: both;"></div>
</body>解决方案 感谢@Ma优博
function menuset(){
var posts = $('.post');
posts.hide();
$(".submenu03 li").click(function() {
// Get data of category
var customType = $(this).data('filter'); // category
console.log(customType);
console.log(posts.length); // Length of articles
$('section.c').css({'display':'block'});
$('.c').show();
posts
.hide()
.filter(function() {
return $(this).data('cat') === customType;
})
.fadeIn('200', function() {
google.maps.event.trigger(map, 'resize');
});
});
}
答
google.maps.event.trigger(map, 'resize');
这个代码添加到淡入，淡出的回调函数，任何事情会改变地图的大小。
+0
我试图在'initialize（）'或者'.submenu03 li'点击函数的末尾放置相同的代码，但这不起作用。 所以这段代码应该放在这个位置!!非常感谢！ ！ –
+0
欢迎您:) –
答
您不应该隐藏和显示基于条件的地图。您只应在需要显示地图或重新初始化时创建地图。否则，当显示器没有显示时，它会在最初显示地图时发生变化，以防止显示不正确。我早些时候遇到过这个问题。
+1
我把'google.maps.event.trigger（map，'resize'）; '到我的淡入功能。它的工作原理!!谢谢！ –
桑德拉，这里的重点是，如果地图没有固定的高度和宽度，Google Maps API将不会绘制地图。在你的情况下，它失败了，因为它开始隐藏。当我使用谷歌地图时，我有一些类似的问题。我的建议是在显示地图时再次渲染地图。第二次调用地图初始化代码再次渲染地图 –
我把'google.maps.event.trigger（map，'resize'）;'放到了我的fadeIn函数中。它的工作原理!!谢谢！ –