Google地图不会在调整大小时以标记为中心

Question

我有一个地图切换，当你打开它时，它不会以地图标记为中心。我已经搜索了所有内容，并尝试了一堆但无法解决这个问题。 HTML标记如下所示：

<div class="hidden_map_wrapper" data-map_height="450px">
    <div class="hidden_map_heading">
        <h3>Locate us on map</h3>
    </div>
    <div id="google_map_1" data-map_type="ROADMAP" data-auto_center_zoom="0" data-lat="40.7782201" data-lng="-73.9733317" data-zoom="13" data-scrollwheel="0" data-maptypecontrol="1" data-pancontrol="1" data-zoomcontrol="1" data-scalecontrol="1" class="google_map" style="height: 450px; width: 100%; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);">
        //bunch of map HTML data here
    </div>
    <div class="google_map_marker" data-title="Our Company" data-icon="map_marker.png" data-lat="40.7782201" data-lng="-73.9733317">
    </div>
</div>

在.google_map内，有一张由api生成的地图。现在点击我有：

$(".hidden_map_heading").click(function () {
    var $current_map = $(this).next(".google_map");
    var map_object = document.getElementById($current_map.attr('id'));

    $current_map.slideToggle({
        duration : 400,
        progress : function () {
            google.maps.event.trigger(map_object, 'resize');

        }
    });
    $('html, body').animate({ scrollTop: '+=' + $current_map.parent().data('map_height') }, 400);
});

这样可行，但我没有将标记置于中心位置。我尝试了整个地图的重新初始化，但这完全没有用。我尝试添加

var centerofmap = map_object.getCenter(); 
google.maps.event.trigger(map_object, 'resize'); 
map_object.setCenter(centerofmap);

在我的progress中，但是没有用（有关非现有功能的错误）。

我有点困惑。在任何地方我看map_object都是这样的：

map = new google.maps.Map(document.getElementById($current_map.attr('id')),
                                            myOptions);

但这意味着我正在初始化地图，地图已经存在，已经初始化并准备就绪。如果我不隐藏它，它就完美无缺。初始化地图的代码如下所示：

function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
    var map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

那么，我在这里错过了什么？如何在调整大小时使地图以标记为中心？

解决方案

诀窍是将地图作为全球对象，正如sabotero所提到的那样。这样我可以使用

$(".hidden_map_heading").click(function () {
    var $current_map = $(this).next(".google_map");

    $current_map.slideToggle({
        duration : 400,
        progress : function () {
            var centerofmap = map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setCenter(centerofmap);
        }
    });
    $('html, body').animate({ scrollTop: '+=' + $current_map.parent().data('map_height') }, 400);
});

它可以用于调整大小。

Answer 1

首先提出var map全球

var map;    
function initialize_gmap($element) {
    var myLatlng = new google.maps.LatLng($element.data('lat'),$element.data('lng'));
    var auto_center_zoom = ($element.data('auto_center_zoom') == 1 ? true : false);
    var scrollwheel = ($element.data('scrollwheel') == 1 ? true : false);
    var mapTypeControl = ($element.data('maptypecontrol') == 1 ? true : false);
    var panControl = ($element.data('pancontrol') == 1 ? true : false);
    var zoomControl = ($element.data('zoomcontrol') == 1 ? true : false);
    var scaleControl = ($element.data('scalecontrol') == 1 ? true : false);
    var styles = (typeof options !== 'undefined') ? options.custom_map_style : '';
    var map_type = google.maps.MapTypeId.ROADMAP;

    if ($element.data('map_type') == 'SATELLITE') map_type = google.maps.MapTypeId.SATELLITE;
    if ($element.data('map_type') == 'HYBRID') map_type = google.maps.MapTypeId.HYBRID;
    if ($element.data('map_type') == 'TERRAIN') map_type = google.maps.MapTypeId.TERRAIN;

    var mapOptions = {
        zoom: parseInt($element.data('zoom'),10),
        center: myLatlng,
        mapTypeId: map_type,
        styles: jQuery.parseJSON(styles),
        scrollwheel: scrollwheel,
        mapTypeControl: mapTypeControl,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        panControl: panControl,
        panControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        zoomControl: zoomControl,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_CENTER
        },
        scaleControl: scaleControl,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        streetViewControl: false,
        streetViewControlOptions: {
            position: google.maps.ControlPosition.RIGHT_CENTER
        }
    };

    var elemnt_id = $element.attr('id');
    var bounds = new google.maps.LatLngBounds();
////////////////////////
////// map is global ///
////////////////////////
/////////////////////////
    map = new google.maps.Map(document.getElementById(elemnt_id), mapOptions);

    var c = 0;
    var markers = [];
    var infoWindowContent = [];
    var marker_icons = [];
    $element.siblings('.google_map_marker').each(function(){
        var $marker = $(this);
        markers[c] = [$marker.data('title'), $marker.data('lat'),$marker.data('lng'),$marker.data('icon')];
        infoWindowContent[c] = ['<div class="info_content">' + '<h3>' + $marker.data('title') + '</h3>' + '<p>' + $marker.html() + '</p>' + '</div>'];
        c++;
    });

    // Display multiple markers on a map
    var infoWindow = new google.maps.InfoWindow(), marker, i;

    // Loop through our array of markers & place each one on the map
    for( i = 0; i < markers.length; i++ ) {
        var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
        bounds.extend(position);
        marker = new google.maps.Marker({
            position: position,
            map: map,
            title: markers[i][0],
            icon: markers[i][3]
        });
        // Allow each marker to have an info window
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infoWindow.setContent(infoWindowContent[i][0]);
                infoWindow.open(map, marker);
            }
        })(marker, i));
    }
    if(auto_center_zoom){
        map.fitBounds(bounds);
    }
}

$('.google_map').each(function(){
    google.maps.event.addDomListener(window, 'load', initialize_gmap($(this)));
});

然后在你的进度函数中：

$(".hidden_map_heading").click(function () {
    var $current_map = $(this).next(".google_map");
    var map_object = document.getElementById($current_map.attr('id'));

    $current_map.slideToggle({
        duration : 400,
        progress : function () {
             google.maps.event.addListener(map, 'resize', function(){ 
            var center = new google.maps.latLng(marker.lat(),marker.lng());
                   map.setCenter(center);
});
            google.maps.event.trigger(map_object, 'resize');

        }
    });
    $('html, body').animate({ scrollTop: '+=' + $current_map.parent().data('map_height') }, 400);
});