Question

我已在动画网站中插入谷歌地图，必须使用display：hidden属性和使用jquery的滑动效果，但地图无法正常显示。你会发现地图偏离中心。请帮忙!!!

编辑：以下代码已经过编辑，现在可以正确显示（感谢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>

Answer 1

实际显示地图时，您需要触发地图调整大小事件。

$('#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);

Answer 2

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" 
src="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;output=embed">
</iframe>
<br/>
<small>
<a href="https://maps.google.co.in/maps?q=chennai&amp;ie=UTF8&amp;hq=&amp;hnear=Chennai,+Tamil+Nadu&amp;ll=13.052414,80.250825&amp;spn=0.991302,1.674042&amp;t=m&amp;z=10&amp;source=embed" style="color:#0000FF;text-align:left">
View Larger Map</a>
</small>

你可以在html代码中使用这个地图............

Answer 3

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
            google.maps.event.trigger(map, 'resize');

    });
});

当可见性最初设置为隐藏时，Google地图无法正确呈现

3 个答案: