Question

我有这个代码独立工作，没有bootstrap。出于某种原因，我无法弄明白，当我在contact.html页面中包含js by script标签时，页面不会渲染地图。我知道有时候bootstrap非常棘手。我已经在head标签之前和之后移动了我的脚本，但仍然不能正常工作。我已经检查了我的脚本与我的参考书，我找不到任何可能有帮助的改变。我需要你们任何一个大师引导者的建议。可能会非常简单，我忽略了。我将地图包含在第19行到第23行中。贝娄将是我的代码......

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

返回点击坐标的event-property为latLng而不是LatLng

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

您必须调用DirectionsService的route-method来请求方向

    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>

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

1 个答案: