Zurb Foundation 中的 Google 地图未重新以 Toggle 为中心

Question

我正在使用 Zurb Foundation 将 Google 地图集成到模板中的手风琴标签中（我相信它是旧版本 4？）。

您可以在此处查看页面：http://terrapatio.com.s150174.gridserver.com/wp/locations/

我所知道的是，当我切换“地图”手风琴链接时，地图现在将呈现，在处理多个地图时似乎有问题。底行最右边的最终地图居中正确，但其余的不是。

google.maps.event.trigger(map, 'resize'); 似乎不会在点击其他地图时触发。我已经查看了与此相关的其他问题并尝试遵循他们的建议，但我仍然没有找到一个好的解决方案。

任何建议将不胜感激。

谢谢！

我的代码如下：

(function($) {

/*
*  render_map
*
*  This function will render a Google Map onto the selected jQuery element
*
*  @type    function
*  @date    8/11/2013
*  @since   4.3.0
*
*  @param   $el (jQuery element)
*  @return  n/a
*/

function render_map( $el ) {

// var
var $markers = $el.find('.marker');

// vars
var args = {
    zoom        : 10,
    center      : new google.maps.LatLng(0, 0),
    mapTypeId   : google.maps.MapTypeId.ROADMAP
};

// create map               
map = new google.maps.Map( $el[0], args);

// add a markers reference
map.markers = [];

// add markers
$markers.each(function(){

    add_marker( $(this), map );

});

// center map
center_map( map );

 }

 /*
 *  add_marker
  *
 *  This function will add a marker to the selected Google Map
 *
 *  @type   function
 *  @date   8/11/2013
  *  @since 4.3.0
 *
 *  @param  $marker (jQuery element)
 *  @param  map (Google Map object)
 *  @return n/a
*/

function add_marker( $marker, map ) {

// var
var latlng = new google.maps.LatLng( $marker.attr('data-lat'), $marker.attr('data-lng') );

// create marker
var marker = new google.maps.Marker({
    position    : latlng,
    map         : map
});

// add to array
map.markers.push( marker );

// if marker contains HTML, add it to an infoWindow
if( $marker.html() )
{
    // create info window
    var infowindow = new google.maps.InfoWindow({
        content     : $marker.html()
    });

    // show info window when marker is clicked
    google.maps.event.addListener(marker, 'click', function() {

        infowindow.open( map, marker );

    });
}

}


function center_map( map ) {

// vars
var bounds = new google.maps.LatLngBounds();

// loop through all markers and create bounds
$.each( map.markers, function( i, marker ){

    var latlng = new google.maps.LatLng( marker.position.lat(), marker.position.lng() );

    bounds.extend( latlng );

});

// only 1 marker?
if( map.markers.length == 1 )
{
    // set center of map
    map.setCenter( bounds.getCenter() );
    map.setZoom( 16 );
}
else
{
    // fit to bounds
    map.fitBounds( bounds );
}

}

/*
 *  document ready
 *
 *  This function will render each map when the document is ready (page has loaded)
 *
 *  @type   function
 *  @date   8/11/2013
  *  @since 5.0.0
 *
 *  @param  n/a
 *  @return n/a
 */

$(document).ready(function(){

    $('.acf-map').each(function() {
        render_map( $(this) );
     });


     $('.map-link').click(function (e) {
        resetMap(map);
     });


    function resetMap(m){
        x = m.getZoom();
        c = m.getCenter();
        google.maps.event.trigger(m, 'resize');
        m.setZoom(x);
        m.setCenter(c);
    };
});

})(jQuery);

Answer 1

首先，通过在创建地图时不使用 var 关键字，您将地图变量设为全局变量，而不是您的 render_map 函数的本地变量：

map = new google.maps.Map( $el[0], args);

这意味着您可以在单击事件处理程序上正确引用它：

$('.map-link').click(function (e) {
    resetMap(map);
});

因此，在页面加载时，您已经为每个 .acf-map 元素多次调用了 render_map 函数。 map 变量在该函数的第一次迭代中创建。此后，它会为彼此的迭代更新。

因此，在.acf-map 元素的循环结束时，map 将成为最后一张地图的对象。

因此，这只是将您的最后一个地图对象与每个 .map-link 链接的点击处理程序相关联。

 $('.map-link').click(function (e) {
    resetMap(map);
 });

有意义吗？我会将该链接点击事件处理程序移入您的render_map 函数，并使map 成为该函数的局部变量。