Question

在google.maps.Map上查看firefox时，图块似乎没有正确排列。

Firefox Google Tiles http://iforce.co.nz/i/dgag2lnp.0g3.png

但是我在Google Chrome

中查看地图时获得了预期的结果

Google Chrome http://iforce.co.nz/i/2txmdv4n.zoc.png

Javascript基于Google Simple Map

的来源

我创建了一个JSFiddle（基于相关网站的代码）。

这个小提琴似乎在firefox中加载得很好，但是当网站上加载相同的代码时（UTF-8字符集，这些图块似乎会重叠并打破）。

Answer 1

此行为可能类似于described in this question。

如果是这样，解决方案是明确调用resize事件：

google.maps.event.trigger(map, "resize");

示例

＆＃13;

jQuery(document).ready(function () {

    initMap();

});

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('details_map_item'), {
        center: {
            lat: -34.397,
            lng: 150.644
        },
        zoom: 8
    });


    google.maps.event.addListener(map, 'tilesloaded', function () {
        google.maps.event.trigger(map, 'resize');
    });
}

＆＃13;

#details_con,
#details_map{
    margin:0 2px 0 0;
    padding:10px;   
    list-style:none;
    background:#fff;
    box-shadow:1px 1px 1px 0px rgba(0, 0, 0, 0.5);
    font-size:14px;
}


#details_map{
    max-width:610px;
    padding:12px;   
    margin:20px auto;
    line-height:1;
}

div#details_map_item {
    height:300px;
    /* width:400px; */
    background: #69C none repeat scroll 0% 0%;
    font-size:14px;
}

＆＃13;

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<div id="details_map">
   <div id="details_map_item"></div>
</div>

＆＃13;

使用Google.Map Tiles的Firefox问题

1 个答案: