탭 페이지의 모든 마커를 표시하도록지도의 줌을 설정하는 방법 부트 스트랩?

이 코드는 탭 페이지에서 Google지도를 수행하는 데 사용되지만 탭의 모든 마커를 표시하지는 않습니다. 탭 페이지의 모든 마커를 표시하는 확대/축소 Google지도 설정 방법. "map.fitBounds(latlngbounds);"이 TabPage에서 작동하지 않습니다. 어떻게 할 수 있습니까?탭 페이지의 모든 마커를 표시하도록지도의 줌을 설정하는 방법 부트 스트랩?

<!DOCTYPE html> 
<html> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<body> 

<h1>My First Google Map</h1> 
<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
    <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
</ul> 

<div class="tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h3>HOME</h3> 
    <p>Some content.</p> 
    </div> 
    <div id="menu1" class="tab-pane fade"> 
    <h3>Menu 1</h3> 

<div id="map" style="width:100%;height:400px;"></div> 
    </div> 
    <div id="menu2" class="tab-pane fade"> 
    <h3>Menu 2</h3> 
    <p>Some content in menu 2.</p> 
    </div> 
</div> 

<script> 
function myMap() { 
    var mapCanvas = document.getElementById("map"); 
    var mapOptions = { 
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10 
    }; 
    var map = new google.maps.Map(mapCanvas, mapOptions); 
$(function() { 
     $('a[href="#menu1"]').on('shown.bs.tab', function (e) { 
      var lastCenter = map.getCenter(); 
      google.maps.event.trigger(map, 'resize'); 
      map.setCenter(lastCenter); 

     }); 
    }); 
var locations=[]; 
locations.push({neme:"Country1",latlng:new google.maps.LatLng(46.71285452819798, 20.36901795864105)}); 
locations.push({neme:"Country2",latlng:new google.maps.LatLng(51.71285452819798, 10.36901795864105)}); 
locations.push({neme:"Country3",latlng:new google.maps.LatLng(62.71285452819798, 30.36901795864105)}); 

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

for(var i=0;i<locations.length;i++) 
{ 

    var marker = new google.maps.Marker({ 
       position: locations[i].latlng, 
       map: map, 
       title:locations[i].name 
       //zoom:8 
      }); 
latlngbounds.extend(marker.position); 
} 

//Get the boundaries of the Map. 
     var bounds = new google.maps.LatLngBounds(); 

     //Center map and adjust Zoom based on the position of all markers. 
     map.fitBounds(latlngbounds); 
} 
</script> 

<script src="https://maps.googleapis.com/maps/api/js?your-key-Api&callback=myMap"></script> 

</body> 
</html>

출처

2017-03-08 dear

지도가 아직 준비되지 않았기 때문입니다. 지도 콜백을 사용해야합니다. jQuery.ready는 map.ready를 catch하지 않습니다.

<script> 
    var map; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
    }); 
    } 
</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" 
async defer></script>

모든지도 관련 기능은 initMap 함수 내에 있거나 내부에서 호출해야합니다.

출처

2017-03-08 20:35:15

이전에 알고있었습니다.하지만 주요 문제는 "map.fitBounds (latlngbounds);를 사용하는 것입니다. 내부 탭 페이지에 모든 마커가 표시되지 않습니다. 만약 태그를 넣으면 탭 밖으로

그래서 모든 괜찮을거야 내부 탭이 제대로 작동하지 않을거야. 이 문제를 해결하는 방법을 제안 해 주시겠습니까? – dear

친구가 제안한 사람은 누구입니까? 솔루션을주세요. – dear

탭 페이지의 모든 마커를 표시하도록지도의 줌을 설정하는 방법 부트 스트랩?

답변

관련 문제