0
我想在我的網頁上顯示一張地圖。 在我的網站上，我使用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 API將不會繪製地圖。在你的情況下，它失敗了，因爲它開始隱藏。當我使用谷歌地圖時，我有一些類似的問題。我的建議是在顯示地圖時再次渲染地圖。第二次調用地圖初始化代碼再次渲染地圖 –
我把'google.maps.event.trigger（map，'resize'）;'放到了我的fadeIn函數中。它的工作原理!!謝謝！ –