Question

在我的网站上，我有一张谷歌地图，但它没有显示我想要的东西。加载后会显示this。然后我最小化我的屏幕and it shows the map。

这是我的代码：

<div id="view1"> 
    <?php
        $location = get_field('locatie_beschrijving');
        if( ! empty($location) ):
    ?>
    <div id="map" style="width: 800px; height:300px "></div>
    <script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
    <script type="text/javascript">
      //<![CDATA[
        function load() {
        var lat = <?php echo $location['lat']; ?>;
        var lng = <?php echo $location['lng']; ?>;
    // coordinates to latLng
        var latlng = new google.maps.LatLng(lat, lng);
    // map Options
        var myOptions = {
        zoom: 9,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
       };
    //draw a map
        var map = new google.maps.Map(document.getElementById("map"), myOptions);
        var marker = new google.maps.Marker({
        position: map.getCenter(),
        map: map
       });
    }
    // call the function
       load();
    //]]>
    </script>
</div>

任何人都知道出了什么问题？

Answer 1

关键是您的地图在初始化时会被隐藏，因此，您需要在显示标签后触发调整大小事件。

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


当div更改大小时，开发人员应在地图上触发此事件。

Bootstrap tabs

此库公开事件：


<强>事件

显示新标签时，事件按以下顺序触发：

hide.bs.tab （在当前有效标签上）

show.bs.tab （在待显示的标签页上）

hidden.bs.tab （在上一个活动标签上，与hide.bs.tab事件相同）

shown.bs.tab （在刚刚显示的新活动标签上，与show.bs.tab事件相同）

这样，您就可以完全控制标签的内容。你知道什么时候显示，隐藏等等。

所以你可以使用类似的东西（使用jQuery）：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { // Trigger map resize when tab is shown google.maps.event.trigger(map, "resize"); });

这会在显示标签时触发调整大小事件。

确保放置此代码的map对象可用。

Answer 2

使用以下编码

google.maps.event.addDomListener(window, "resize", resizingMap());

function resizingMap() {
 if(typeof map =="undefined") return;
 var center = map.getCenter();
 google.maps.event.trigger(map, "resize");
 map.setCenter(center); 
 }

直到我最小化屏幕，Google地图才显示任何内容

2 个答案: