我正在尝试在我的网页中显示地图。在我的网站上，我使用date-filter和data-cat功能。所以我一开始隐藏了地图。但是当我单击.submenu04 ul li时，我的问题是，地图显示不好。
显示错误但是在我调整网页大小后，它变得正常。调整大小后
我在其他问题中找到了解决方案，但没有用。嵌入谷歌地图显示错误，直到调整网页大小这是一种解决它的方法吗？
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');
将此代码添加到淡入，淡出的回调函数中，任何内容都会更改地图大小。
您不应该根据条件隐藏和显示地图。仅当需要显示地图或重新初始化地图时，才应创建地图。否则，当显示为无时，它最初会渲染地图，但在将其更改为阻止后，它无法正确显示。我之前遇到过这个问题。