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。请在文档准备好之内。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;