Google Maps API 和 JQuery Slide Toggle 未正确初始化地图答案

【问题标题】：Google Maps API and JQuery Slide Toggle not initialising map correctlyGoogle Maps API 和 JQuery Slide Toggle 未正确初始化地图
【发布时间】：2013-04-24 00:28:25
【问题描述】：

我遇到的问题是 Google 地图 api 的初始化。当我在设置为显示的普通 div 中有地图 api 时，它可以正常工作并上下切换，但是当我将显示设置为无时，它无法正确加载。地图仅加载到一半，并且不显示图钉图像。是否有解决此问题的方法，或者这在最初未显示的切换幻灯片中根本不起作用。

我创建的示例页面如下。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript' src='scripts/jscripts/jquery-1.4.js'></script>

<style type="text/css">
.slideTogglebox{
    float:left;
    padding:8px;
    margin:16px;
    border:1px solid red;
    width:500px;
    height:350px;
    background-color:#000000;
    color:white;
    display:none;
}
.clear{
    clear:both;
}
</style>

</head>

<body>
<?php
$url ="http://maps.googleapis.com/maps/api/geocode/xml?address=PL329YN&sensor=false";
$getAddress = simplexml_load_file($url);
$lat = $getAddress->result->geometry->location->lat;
$lng = $getAddress->result->geometry->location->lng;
?>

<div class="clear">
<h3>slideToggle() example</h3> <a href="javascript:slideToggle()" id=slideToggle>Click Me</a>
<br/>
<div class="slideTogglebox" id='map_canvas'>

</div>

</div>

<script type="text/javascript">

function initialize() {

    <?php
    print "var lat = $lat;";
    print "var lng = $lng;";
    ?>

    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var image = 'images/map/pin_green.png';
    var myLatLng = new google.maps.LatLng(lat, lng);
    var beachMarker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image
    });
}

var init = false;

$("#slideToggle").click(function () {

   if (!init) {
        initialize();
        init = true;
   }
   $('.slideTogglebox').slideToggle('slow');
});


</script>

【问题讨论】：

标签： jquery google-maps

【解决方案1】：

似乎答案可能很简单。仅当包含地图的 div 可见时才初始化地图。将回调放入.slideToggle() 调用检查 e 是否可见 div 并且没有地图。如果是这样，请加载地图（您可能还想在地图加载时禁用点击事件操作）。您可能还需要考虑将 map_canvas 作为 slideToggleBox 的子项（而不是 slideToggleBox 本身），以防影响地图的反应等。

顺便说一句，当您已经通过 jQuery 添加点击事件时，<a href="javascript:slideToggle()" ... > 是什么意思？

【讨论】：

【解决方案2】：

新的 v3 api 和 jquery 似乎存在问题。它似乎可以毫无问题地与 Google maps api 的 v2 一起使用。

因此，为了解决这个问题，我在 div 切换后调用了初始化函数。然后我在 CSS 中设置了背景以匹配页面上的背景，以便在切换后它看起来淡入淡出。

<script type="text/javascript">

$("#slideToggle").click(function () {

   $('.slideTogglebox').slideToggle(function initialize() {

        <?php
        print "var lat = $lat;";
        print "var lng = $lng;";
        ?>

        var latlng = new google.maps.LatLng(lat, lng);
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var image = 'images/map/pin_green.png';
        var myLatLng = new google.maps.LatLng(lat, lng);
        var beachMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image
        });
    });
});


</script>

【讨论】：

【解决方案3】：

您也可以只为 css（不透明度、高度）设置动画，而无需在 js 中使用额外的回调。奇迹般有效。只要将包含地图的 div 显示为块，您就可以使用此方法。

【讨论】：