Bootstrap Modal中的Google方向圖不起作用

Question

我正在嘗試在Bootstrap模式下顯示Google Map路線，但不會在彈出窗口中呈現。 以下是我的代碼。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
         var rendererOptions = {
           draggable: true
         };
         var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
         var directionsService = new google.maps.DirectionsService();
         var map;

         var australia = new google.maps.LatLng(41.171418,28.311553);

         function initialize() {

           var mapOptions = {
             zoom: 4,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             center: australia
           };
           map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
           directionsDisplay.setMap(map);
           directionsDisplay.setPanel(document.getElementById('directionsPanel'));

           google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
             computeTotalDistance(directionsDisplay.directions);
           });

           var trafficLayer = new google.maps.TrafficLayer();
          trafficLayer.setMap(map);
           //calcRoute();
         }

         function calcRoute() {
          var start = document.getElementById("start").value;
          var end = document.getElementById("end").value;
          var distanceInput;

           var request = {
             origin: start,
             destination: end,
             travelMode: google.maps.DirectionsTravelMode.DRIVING
           };
           directionsService.route(request, function(response, status) {
             if (status == google.maps.DirectionsStatus.OK) {
               directionsDisplay.setDirections(response);
            //distanceInput.value = response.routes[0].legs[0].distance.value / 1000;
             }
           });
         }

         function computeTotalDistance(result) {
           var total = 0;
           var time= 0;
           var from=0;
           var to=0;
           var myroute = result.routes[0];
           for (var i = 0; i < myroute.legs.length; i++) {
             total += myroute.legs[i].distance.value;
             time +=myroute.legs[i].duration.text;
             from =myroute.legs[i].start_address;
             to =myroute.legs[i].end_address;


           }
           time = time.replace('hours','H');
           time = time.replace('mins','M');
           total = total / 1000.
           document.getElementById('from').innerHTML = from + '-'+to;
           document.getElementById('duration').innerHTML = time ;
           document.getElementById('total').innerHTML =Math.round( total)+" KM" ;
         }

         google.maps.event.addDomListener(window, 'load', initialize);


      </script>
<script type='text/javascript'>

    $('#myMapModal').on('shown.bs.modal', function(e) {
        var rendererOptions = {
           draggable: true
         };
         var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
         var directionsService = new google.maps.DirectionsService();
         var map;

         var australia = new google.maps.LatLng(41.171418,28.311553);

         function initialize() {

           var mapOptions = {
             zoom: 4,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             center: australia
           };
           map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
           directionsDisplay.setMap(map);
           directionsDisplay.setPanel(document.getElementById('directionsPanel'));

           google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
             computeTotalDistance(directionsDisplay.directions);
           });
           calcRoute();

         google.maps.event.addDomListener(window, 'load', initialize);
    });
  });
</script>

我的HTML：

<a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal">
   Launch Map Modal
</a>
<input type="text" name="start" id="start" value="chennai"/>
<input type="text" name="end" id="end" value="vellore"/>

<div id="myMapModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <div id="map-canvas" style="margin-left:15px;margin-righ:15px;float:left;width:90%; height:450px"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

我嘗試以不同的方式初始化它，但沒有任何效果。

Answer 1

更新：您不需要在兩個地方進行intialize ，請在准備好文檔的內部調用它。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script> <script> var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; var directionsService = new google.maps.DirectionsService(); var map; var australia = new google.maps.LatLng(41.171418,28.311553); function calcRoute() { var start = document.getElementById("start").value; var end = document.getElementById("end").value; var distanceInput; var request = { origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); //distanceInput.value = response.routes[0].legs[0].distance.value / 1000; } }); } function computeTotalDistance(result) { var total = 0; var time= 0; var from=0; var to=0; var myroute = result.routes[0]; for (var i = 0; i < myroute.legs.length; i++) { total += myroute.legs[i].distance.value; time +=myroute.legs[i].duration.text; from =myroute.legs[i].start_address; to =myroute.legs[i].end_address; } time = time.replace('hours','H'); time = time.replace('mins','M'); total = total / 1000. document.getElementById('from').innerHTML = from + '-'+to; document.getElementById('duration').innerHTML = time ; document.getElementById('total').innerHTML =Math.round( total)+" KM" ; } $(document).ready(function(){ initialize(); }); $('#myMapModal').on('shown.bs.modal', function(e) { var rendererOptions = { draggable: true }; var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);; var directionsService = new google.maps.DirectionsService(); var map; var australia = new google.maps.LatLng(41.171418,28.311553); }); function initialize() { var mapOptions = { zoom: 4, mapTypeId: google.maps.MapTypeId.ROADMAP, center: australia }; map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('directionsPanel')); google.maps.event.addListener(directionsDisplay, 'directions_changed', function() { computeTotalDistance(directionsDisplay.directions); }); calcRoute(); }; </script> <a href="#" data-lat="23, 18.33" data-toggle="modal" data-target="#myMapModal"> Launch Map Modal </a> <input type="text" name="start" id="start" value="chennai"/> <input type="text" name="end" id="end" value="vellore"/> <div id="myMapModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <div id="map-canvas" style="margin-left:15px;margin-righ:15px;float:left;width:90%; height:450px"></div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>