Question

我在页面上有几张Google地图。一次只显示一个，您可以通过单击按钮从一个地图更改为另一个地图。由于Google地图首次初始化地图时隐藏了一些地图，因此我需要“刷新”正在显示的地图，为此我需要获取地图的中心。我使用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()函数中，我的第二个地图的中心（最初隐藏的那个）的中心在按钮的单击事件期间发生变化，该按钮除了触发此功能之外什么都不做。我确实删除了一些变量并更改了一些类名，以便代码更易于阅读，因此您可以忽略代码中的任何其他问题。

我想知道为什么中心会发生变化，但如果你有更清洁的方法来做这一切，那也很棒。

Answer 1

此代码不会产生任何影响：

map.setCenter(map.getCenter());

getCenter()会返回地图的当前center（当您调整地图大小时会更改），而不是最初设置的值。

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

initMaps()中的

：

myOptions.center = myOptions._center = baseLatLng;

refreshMap()中的

：

map.setCenter(map._center);

谷歌地图正在改变地图的中心

1 个答案: