javascript - Google map 正在更改 map 中心

Question

我的页面上有一些 Google map 。一次仅显示一张 map ，您可以通过单击按钮从一张 map 更改为另一张 map 。由于当 Google map 首次初始化 map 时，某些 map 是隐藏的，因此我需要“刷新”正在显示的 map ，为此我需要获取 map 的中心。我使用 map.getCenter() 但不知怎的，中心在到达那里之前就发生了变化。

我已经调试了以下代码，我知道它在哪里发生了变化，但原因仍然是个谜。

function initMaps() {
    if ($('.gmap').length) {
        var $maps = $('.gmap'),
        myOptions = {
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'mapStyle']
            }
        },
        maps = {};

        $maps.each(function () {
            var latitude = parseFloat($(this).attr('data-latitude')),
                longitude = parseFloat($(this).attr('data-longitude')),
                mapNumber = $(this).attr('data-number'),
                baseLatLng = new google.maps.LatLng(latitude, longitude);
            myOptions.center = baseLatLng;
            maps[mapNumber] = new google.maps.Map(this, myOptions);
            var mapCustomType = new google.maps.StyledMapType(mapStyle, myOptions);
            maps[mapNumber].mapTypes.set('custom', mapCustomType);
            maps[mapNumber].setMapTypeId('custom');
        });

        $('.map').hide();
        $('.map:first').show();
        console.log(maps);  // Centers are the same
        changeMaps(maps);
    }
}

function changeMaps(maps) {
    console.log(maps); // Centers are the same
    $('.maps-list span').click(function () {
        console.log(maps); // Centers have changed !!!
        var $mapClass = $('.map-' + $(this).attr('class')),
            map = maps[parseInt($mapClass.find('.gmap').attr('data-number'))];
        $('.map').hide();
        $mapClass.show();
        refreshMap(map);
    });
}

function refreshMap(map) {
    google.maps.event.trigger(map, 'resize');
    map.setCenter(map.getCenter());
}

在 changeMaps() 函数中，我的第二张 map (最初隐藏的 map )的中心在按钮的单击事件期间发生变化，该按钮除了触发此函数之外什么也不做。我确实删除了几个变量并更改了一些类名，以便代码更易于阅读，因此您可以忽略代码的任何其他问题。

我想知道为什么中心会发生变化，但如果你有一个更干净的方法来完成所有这些，那就太好了。

Answer 1

此代码不会产生任何效果:

map.setCenter(map.getCenter());

getCenter() 返回 map 当前的center(当您调整 map 大小时，该中心会发生变化)，而不是最初设置的值。

您必须将初始值存储在另一个属性中，然后将中心设置为存储的值。

在initMaps()中:

myOptions.center = myOptions._center = baseLatLng;

在refreshMap()中:

map.setCenter(map._center);