Bootstrap 中的谷歌地图和行车路线

Question

我有这个代码自己工作，没有引导程序。出于某种原因，我还无法弄清楚，当我在 contact.html 页面中通过脚本标签包含 js 时，该页面不会呈现地图。我知道有时引导程序非常棘手。 我在 head 标签之后和之前移动了我的脚本，但仍然无法正常工作。我已经对照我拥有的参考书检查了我的脚本，但我找不到任何可能有帮助的改变。我需要你们中的任何一位大师引导人的建议。可能是我忽略的非常简单的事情。我将第 19 行到第 23 行中的地图包括在内。 Bellow 将是我的代码....

  <!-- Page Heading/Breadcrumbs -->
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header">Contact
          <small>Mission Link</small>
        </h1>
        <ol class="breadcrumb">
          <li>
            <a href="index.html">Home</a>
          </li>
          <li class="active">Contact</li>
        </ol>
      </div>
    </div>
    <!-- /.row -->

      <!-- Content Row -->
      <div class="row">
        <!-- Map Column -->
        <div class="col-md-9">
            <div id="map"></div>
            <div id="directions"></div>
        </div>
        <!-- Contact Details Column -->
        <div class="col-md-3">
          <h3>Contact Details</h3>
          <p>
            One University Park Dr.<br>Nashville, TN 370204<br>
          </p>
          <p><i class="fa fa-phone"></i>
            <abbr title="Phone">P</abbr>: (123) 456-7890</p>
          <p><i class="fa fa-envelope-o"></i>
            <abbr title="Email">E</abbr>: <a href="mailto:info@missionlink.org">info@missionlink.org</a>
          </p>
          <p><i class="fa fa-clock-o"></i>
            <abbr title="Hours">H</abbr>: Monday - Friday / 9:00 AM to 5:00 PM</p>
        </div>
      </div>
      <!-- /.row -->

##############JS

$(document).ready(function() {
  'use strict';
  var directionsService = new google.maps.DirectionsService();
  var markers = [];
  var myLatlng = new google.maps.LatLng(36.1053976, -86.8000707);
  var mapOptions = {
        zoom     : 8, 
        center   : myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  var map = new google.maps.Map($('#map').get(0), mapOptions);

  var listener = 
  google.maps.event.addListener(map, 'click', function(event) {
    var marker = new google.maps.Marker({position: event.LatLng, map: map});
    markers.push(marker);
    if (markers.length > 1) {
        google.maps.event.removeListener(listener);
        var marker1 = markers[0];
        var marker2 = markers[1];
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);
        directionsRenderer.setPanel($('#directions').get(0));
        var request = {
            origin     : marker1.getPosition(),
            destination: marker2.getPosition(),
            travelMode : google.maps.TravelMode.DRIVING
        };

        if(status == google.maps.DirectionsStatus.OK) {
            directionsRenderer.setDirections(result);
        }
    }
  });
});

Answer 1

1. 返回点击坐标的事件属性是latLng而不是LatLng

     var marker = new google.maps.Marker({position: event.latLng, map: map});
   

2. 您必须调用 DirectionsService 的路线方法来请求方向

       directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
         directionsRenderer.setDirections(result);
        }
       });
   

---

$(window).load(function() {
  'use strict';
  var directionsService = new google.maps.DirectionsService();
  var markers = [];
  var myLatlng = new google.maps.LatLng(36.1053976, -86.8000707);
  var mapOptions = {
        zoom     : 8, 
        center   : myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
  var map = new google.maps.Map($('#map').get(0), mapOptions);

  var listener = 
  google.maps.event.addListener(map, 'click', function(event) {
    var marker = new google.maps.Marker({position: event.latLng, map: map});
    markers.push(marker);
    if (markers.length > 1) {
        google.maps.event.removeListener(listener);
        var marker1 = markers[0];
        var marker2 = markers[1];
        var directionsRenderer = new google.maps.DirectionsRenderer();
        directionsRenderer.setMap(map);
        directionsRenderer.setPanel($('#directions').get(0));
        var request = {
            origin     : marker1.getPosition(),
            destination: marker2.getPosition(),
            travelMode : google.maps.TravelMode.DRIVING
        };
          directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsRenderer.setDirections(result);
      markers[0].setMap(null);
      markers[1].setMap(null);
    }
  });

    }
  });
});

html,body,#map{height:100%;margin:0;padding:0}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div>