如何设置地图缩放以在选项卡引导中显示所有标记？

Question

I use this code for perform google maps in tab page but not show all markers in the tab. 我使用此代码在标签页中执行Google地图，但未在标签中显示所有标记。 how to set zoom google map for show all markers in the tab page. 如何设置缩放谷歌地图以在标签页中显示所有标记。 " map.fitBounds(latlngbounds); " not worked in the TabPage. “ map.fitBounds(latlngbounds); ”在TabPage中不起作用。 how can i do it? 我该怎么做？

<!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>

Answer 1

It is because your map is not ready yet. 这是因为您的地图尚未准备好。 you need to use map callback. 您需要使用地图回调。 jQuery.ready doesn't catch map.ready. jQuery.ready不会捕获map.ready。

<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>

all your map related functionality should be inside the initMap function or should be called inside it. 与地图相关的所有功能都应该在initMap函数内部或在其内部调用。

如何设置地图缩放以在选项卡引导中显示所有标记？

问题描述

1 个解决方案

解决方案1
0 2017-03-08 20:35:15

如何设置地图缩放以在选项卡引导中显示所有标记？

问题描述

1 个解决方案

解决方案1 0 2017-03-08 20:35:15

解决方案1
0 2017-03-08 20:35:15