Google 地图 API - 当地图处于模式模式时，路线服务不会自动缩放

Question

我有以下功能可以向用户显示 2 lats 和 lngs 之间的方向

$(document).ready(function(){
    initialize_direction();
});

function initialize_direction() {
    var directionDisplay;
    var directionsService = new google.maps.DirectionsService();
    var direction_map;

    directionDisplay = new google.maps.DirectionsRenderer();
    var myOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    }
    direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
    directionDisplay.setMap(direction_map);

    var start = '51.5074, 0.1278';
    var end = '<%= lat %>' + ',' + '<%= lng %>';
    var request = {
        origin:start,
        destination:end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionDisplay.setDirections(response);
        }
    });
}

问题是，如果我将包含地图的 canvas 放在页面上，地图会自动缩放以适合 2 个标记，但如果我将 canvas 放在 Bootstrap 模态，我得到以下不会自动缩放以适合标记的内容：

有谁知道如何解决这个问题？下面是 Bootstrap 模态

<div class="modal fade" id="direction_modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Direction to restaurant</h4>
        </div>
        <div class="modal-body">
            <div id="direction_canvas" style="width:100%;height:400px;"></div>
        </div>
    </div>
</div>

Answer 1

在模式打开时调用 initialize_direction();。尝试像下面这样可能会有所帮助。

 $(document).ready(function(){
   $( "#direction_modal" ).on('shown.bs.modal', function(){
     initialize_direction();
   });
 });

 function initialize_direction() {
     var directionDisplay;
     var directionsService = new google.maps.DirectionsService();
     var direction_map;

     directionDisplay = new google.maps.DirectionsRenderer();
     var myOptions = {
         mapTypeId: google.maps.MapTypeId.ROADMAP,
     }
     direction_map = new google.maps.Map(document.getElementById("direction_canvas"), myOptions);
     directionDisplay.setMap(direction_map);

     var start = '51.5074, 0.1278';
     var end = '51.2074, 0.1278';
     var request = {
         origin:start,
         destination:end,
         travelMode: google.maps.DirectionsTravelMode.DRIVING
     };
     directionsService.route(request, function(response, status) {
         if (status == google.maps.DirectionsStatus.OK) {
             directionDisplay.setDirections(response);
         }
     });
 }

  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=AIzaSyAmqnSK2LDuPesG7GMG9thy_KDDmKnr7Zk"></script>
 
<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#direction_modal">Open Modal</button>


    
      <!-- Modal content-->
   <div class="modal fade" id="direction_modal" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Direction to restaurant</h4>
        </div>
        <div class="modal-body">
            <div id="direction_canvas" style="width:100%;height:400px;"></div>
        </div>
    </div>
</div>

  
</div>

Answer 2

我在 fancybox 上遇到了同样的问题。尝试下面的代码来实现相同的目的。

 var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 7,
        center: {
            lat: //your lat,
            lng: //your lng
        }
    });
    //start
    map.setOptions({minZoom: 7});

Google 地图 API - 当地图处于模式模式时，路线服务不会自动缩放

Google Map API - Directions Service does not auto zoom when the map in a modal

javascript

google-maps

zooming

google-maps-api-3

bootstrap-modal