javascript - 在引导选项卡上调整大小后，谷歌地图的标记不居中

Question

我买了一个地理位置地图脚本，当应用于引导选项卡时，它只会显示小的左上角跨度。我添加了调整大小来克服它。

$(document).ready(function() { $(‘a[href=”#tab2”]’).click(function(e) {    setTimeout(initialise, 1000); }); </script>

function initialise() {
    var myMap = document.getElementById('map-myid1');
    google.maps.event.trigger(myMap, 'resize');
};
});

我面临的问题是地图的标记不是中心，它会隐藏在地图的左侧。如何解决？

看实际行动

Answer 1

在bootstrap 3.xx中，此脚本将有所帮助：

    var map;
    google.maps.visualRefresh = true;     // Enable the visual refresh
    function initialize() {
          // map initialization code 
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    $(function () {
        $('a[href="#Location"]').on('shown.bs.tab', function(e) {
            lastCenter=map.getCenter();
            google.maps.event.trigger(map, 'resize');
            map.setCenter(lastCenter);

        });
    });

a[href="#Location"]选项卡的锚选择器在哪里。

Answer 2

我在使用 Google Maps 和 Bootstrap Tab 插件时遇到了同样的问题。

我使用“显示”事件在选项卡中初始化谷歌地图，而不是“点击”事件。

$('a[href="#tab2"]').on('shown',function(e) {
    // Initialized once the google map
    // ...
    // ...

    // use this to redraw google map when current tab is shown.
    google.maps.event.trigger(document.getElementById('Your div id'), 'resize');
});

Answer 3

我检查了您的页面来源，发现您正在使用 setTimeout(initialise, 1000); 因此显示地图有点慢。尝试替换以下代码。

$(document).ready(function() {
        $('a[href="#tab2"]').click(function(e) {
            initialise();
        });

Answer 4

尝试这个：

var map = null;

var center = null;

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

function initMap() 
{
    map = new google.maps.Map(document.getElementById("Your div id"), 
    {
       center: new google.maps.LatLng("mycenter"),
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
    });

    center = bounds.getCenter();

    map.fitBounds(bounds);
}