0
Ich versuche, eine Karte in meiner Webseite anzuzeigen. In meiner Website verwende ich date-filter und data-cat Funktion. So verberge ich zuerst Karte. Aber mein Problem kommt, wenn ich auf die .submenu04 ul li klicke, die Karte nicht gut angezeigt.google map nicht gut angezeigt, bis ich die Größe der Webseite
wrong display Aber nachdem ich die Webseite Größe geändert habe, wurde es normal. after resize
Ich fand Lösungen in anderen Fragen, aber es hat nicht funktioniert. Embed google map is wrong displayed until resizing webpage Ist es eine Möglichkeit, es zu lösen?
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>Lösung Dank @Ma Yubo
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');
});
});
}
Sandra, der Punkt hier ist, dass Google Maps API die Karte nicht zeichnen wird, wenn es keine feste Höhe und Breite hat. In deinem Fall scheitert es, weil es hidded beginnt. Als ich Google Maps verwendete, hatte ich einige ähnliche Probleme. Mein Vorschlag ist, die Karte erneut darzustellen, wenn Sie sie zeigen. Rufen Sie den Map-Initialisierungscode ein zweites Mal auf, um die Map erneut zu rendern. –
Ich lege 'google.maps.event.trigger (map, 'resize');' auf meine fadeIn-Funktion. Und es funktioniert !! Danke! –