javascript - 为多个标记设置 map 边界

Question

我正在尝试为一组标记设置界限，但不断获取整个地球 map 。我已经检查过，我的所有标记都设置了正确的坐标。这是我的完整代码:

PHP

foreach ($business AS $b) {
        $mapData .= '["'.$b->name.'", '.$b->lat.', '.$b->lon.', '.$cnt++.', '.($b->ID != '' ? 1 : 0).'],';
        $avgLat = $avgLat + $b->lat;
        $avgLon = $avgLon + $b->lon;
        $cntEnrolled = $cntEnrolled +1;
    }
}

$mapData = rtrim($mapData, ",");
$avgLat = $avgLat / $cntEnrolled;
$avgLon = $avgLon / $cntEnrolled;

HTML

<div id="map" class="pad0 mar0 w100p"></div>

JS

<script>                      
    function initMap() {
          var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 14,
            mapTypeControl: false,
            center: {
                lat: '.$avgLat.', 
                lng: '.$avgLon.'
            }
          });                        
          setMarkers(map);
    }
      
    var restaurants = ['.$mapData.'];
        
    function setMarkers(map) {
        
        var bounds = new google.maps.LatLngBounds();            
          
        for (var i = 0; i < restaurants.length; i++) {
            var restaurant = restaurants[i];
            var layerposit = (restaurant[4] == 1 ? 999  : restaurant[3]);
            var marker = new google.maps.Marker({
                position: {
                    lat: restaurant[1], 
                    lng: restaurant[2]
                },
                map: map,           
                title: restaurant[0],
                zIndex: layerposit
            });
            bounds.extend(marker.getPosition());
        }
        map.fitBounds(bounds);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBQo-k5Tta6adY9AuEi1afno8HKvac_WoQ&callback=initMap"></script>

这是渲染的内容:

我错过了什么？

Answer 1

罪魁祸首是以下带有引导选项卡的类:.tab-pane

<div role="tabpanel" class="tab-pane fade" id="mymap">

把它拿出来，所有的 map 问题都会消失。