我在一个动画网站中插入了google map ，该网站必须利用jquery的display:hidden属性和滑动效果，但 map 无法正常显示。你会发现 map 偏离了中心。请帮忙!!!
编辑:下面的代码已被编辑，现在可以正确显示(感谢 Salman)，但现在它不再显示在标记的中心。 map.setCenter(myLatlng) 也不起作用。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map //NEW!
var myLatlng = new google.maps.LatLng(52.518903284520796,-1.450427753967233);
function initialize() {
var mapOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); //NEW!(SMALL EDIT)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Beauty Courses 4 U',
icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<style>
#menu {display: none;}
.sliderContainer {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
}
.sliderViewer {
position: absolute;
left: 0px;
overflow-x: hidden;
width: 900px;
height: 300px;
}
.sliderViewer>div {
width: 300px;
height: 300px;
float: left;
overflow: hidden;
}
#map_canvas {
width: 200px;
height: 200px;
margin: 0 auto 0 auto;
}
.sliderViewer>div:nth-child(1) {background: red;}
.sliderViewer>div:nth-child(2) {background: yellow;}
.sliderViewer>div:nth-child(3) {background: blue;}
a {cursor: pointer;}
</style>
<body>
<a id="showMenu">Show menu (click here)</a>
<div id="menu">
<ul>
<li id="link1"><a>link1</a></li>
<li id="link2"><a>link2 (click on this link)</a></li>
<li id="link3"><a>link3</a></li>
</ul>
<div class="sliderContainer">
<div class="sliderViewer">
<div>some conetent in panel 1</div>
<div>The map is off center:
<div id="map_canvas"></div></div>
<div>some conetent in panel 3</div>
</div>
</div>
</div>
</body>
<script>
$( document ).ready(function(){
$('#showMenu').on('click', function(){
$('#menu').show(500);
})
$('#link1').on('click',function(){
$('.sliderViewer').animate({left: 0}, 1000);
})
$('#link2').on('click',function(){
$('.sliderViewer').animate({left: -300}, 1000);
google.maps.event.trigger(map, 'resize'); //NEW!
map.setCenter(myLatlng); //NEW!
})
$('#link3').on('click',function(){
$('.sliderViewer').animate({left: -600}, 1000);
})
});
</script>
</html>
最佳答案
实际显示 map 时需要触发 map 调整大小事件。
$('#link2').on('click',function(){
$('.sliderViewer').animate({left: -300}, 1000);
google.maps.event.trigger(map, 'resize')
})
但是，除非您将 map 变量设置为全局变量，否则这将不起作用。所以你可以像这样开始:
var map;
function initialize() {
// init codes
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
关于jquery - 当可见性最初设置为隐藏时，Google map 无法正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19245804/