Google地图API - 路线服务不会自动缩放模式中的地图 [英] Google Map API - Directions Service does not auto zoom when the map in a modal

问题描述

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

  $（document）.ready（function （）{
 initialize_direction（）; 
}）; 
 
函数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）; 
 } 
}）; 
} 
  

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

有谁知道如何解决这个问题？以下是Bootstrap Modal

 < div class =modal fadeid =direction_modalrole =dialog> 
< div class =modal-dialog modal-lg> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modal>& times;< / button> 
< h4 class =modal-title>餐厅方向< / h4> 
< / div> 
< div class =modal-body> 
< div id =direction_canvasstyle =width：100％; height：400px;>< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

在模态打开时调用 initialize_direction（）; 。请试试像下面这样可能会有所帮助。

$（document）.ready（function （）{$（#direction_modal）.on（'shown.bs.modal'，function（）{initialize_direction（）;}）;}）;函数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>引导示例< / title> < meta charset =utf-8> < meta name =viewportcontent =width = device-width，initial-scale = 1> < link rel =stylesheethref =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>模式示例< / h2> <！ - 用按钮触发模式 - > < button type =buttonclass =btn btn-info btn-lgdata-toggle =modaldata-target =＃direction_modal> Open Modal< / button> <！ - 模态内容 - > < div class =modal fadeid =direction_modalrole =dialog> < div class =modal-dialog modal-lg> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>& times;< / button> < h4 class =modal-title>餐厅方向< / h4> < / DIV> < div class =modal-body> < div id =direction_canvasstyle =width：100％; height：400px;>< / div> < / DIV> < / DIV>< / DIV> < / div>

I have the following function to show direction between 2 lats and lngs to user

$(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);
        }
    });
}

The problem is if I put the canvas that contains the map on the page, the map is automatically zoomed to fit 2 markers but if I put the canvas in a Bootstrap modal, I got the following which does not automatically zoomed to fit markers:

Does anyone know how to fix this? Below is the Bootstrap Modal

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

解决方案

Call initialize_direction(); on modal open. Try Like below it may help.

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

这篇关于Google地图API - 路线服务不会自动缩放模式中的地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！