javascript - 点击动态加载纬度/经度后，谷歌地图不居中

Question

我动态加载纬度/经度变量并将它们传递给 Google map Initialize(); 函数。

function initialize() {
    var lat = $('.map_img', '.inview').attr('data-lat');
    var lng = $('.map_img', '.inview').attr('data-lng');
    var myLatlng = new google.maps.LatLng(lat, lng);
    var mapOptions = {
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map
    });
    google.maps.event.trigger(map, 'resize');
}

因此，我通过 data 属性提取这些坐标，该属性是通过 WordPress 小部件设置的，并将它们提供给 Google map 。

我想运行该函数，每次用户单击这些左/右按钮时获取新坐标。

<a href="#" class="btn-prev">previous</a>

<a href="#" class="btn-next">next</a>

$('.btn-prev').click(function () {
    //initialize maps script again
    initialize();
});

$('.btn-next').click(function () {
    //initialize maps script again
    initialize();
});

然后用户单击 map 图像，该图像将打开带有新坐标的大 map 。

var mapImg = $('.map_img');
var $overlay = $('.overlay'),
    resize = true,
    map;
mapImg.click(function () {
    $overlay.show();
    if (resize) {
        initialize();
        resize = false;
    }
});

我遇到的问题是，第一次单击后， map 未居中。我原以为 google.maps.event.trigger(map, 'resize'); 可以解决这个问题。

我不确定为什么会发生这种情况，因此我创建了一个 fiddle 来复制该问题。

http://jsfiddle.net/SEOplay/3CXSs/13/

非常感谢您的帮助。

Answer 1

尝试使用:

google.maps.event.addDomListener(window, "click", function () {
    var center = map.getCenter();
    google.maps.event.trigger(map, "resize");
    map.setCenter(center);
});

代码效率不高，因为我不确定它如何适合您的代码，但每次有人单击某处时，它都会使 map 重新居中。它应该能让您了解所需的代码，如果您有任何问题，请告诉我。

JSFiddle (您似乎还存在一个错误，即它不会在第一次下一个/上一个点击时更改 map 。