Question

我买了一个地理定位地图脚本，当应用于bootstrap标签时，它只会显示小的左上角。我添加了调整大小以克服它。

$(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');
};
});

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

See in real action

Answer 1

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

    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

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

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

Answer 3

试试这个：

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);
}

Answer 4

我在使用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');
});

在引导选项卡上调整大小后，Google地图的标记不会居中

4 个答案: