Question

请参阅此image。

我尝试将当前位置显示到目的地，但方向没有显示在地图中，它只显示面板上的路线。

    navigator.geolocation.getCurrentPosition(function (position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var coords = new google.maps.LatLng(latitude, longitude);
        var directionsService = new google.maps.DirectionsService;
        var directionsDisplay = new google.maps.DirectionsRenderer({
            draggable: true,
            map: map,
            panel: document.getElementById('right-panel')
        });
        var trafficLayer = new google.maps.TrafficLayer();
        var mapOptions =
        {
            zoom: 15,
            center: coords
        };

        var map = new google.maps.Map(document.getElementById("map"), mapOptions);

        displayRoute(directionsService, directionsDisplay);


        function displayRoute(service, display) {
            service.route({
                origin: coords,
                destination: new google.maps.LatLng(5.409722, 100.313319),
                provideRouteAlternatives: true,
                travelMode: google.maps.TravelMode.DRIVING
            }, function (response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    display.setDirections(response);
                } else {
                    alert('Could not display directions due to: ' + status);
                }
            });
        }
    });

地图不显示从当前位置到目的地的方向。

Answer 1

创建google.maps.DirectionsRenderer时，地图未定义。在地图后创建google.maps.DirectionsRenderer，或者在定义地图后在其上调用.setMap。

  var coords = new google.maps.LatLng(latitude, longitude);
  var directionsService = new google.maps.DirectionsService;
  var trafficLayer = new google.maps.TrafficLayer();
  var mapOptions = {
    zoom: 15,
    center: coords
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });
  displayRoute(directionsService, directionsDisplay);

proof of concept fiddle

代码段

var geocoder;
var map;
// [ 0 ]: Tapah, Perak, Malaysia (4.19773, 101.261529)

function initialize() {
  var latitude = 4.19773;
  var longitude = 101.261529;
  var coords = new google.maps.LatLng(latitude, longitude);
  var directionsService = new google.maps.DirectionsService;
  var trafficLayer = new google.maps.TrafficLayer();
  var mapOptions = {
    zoom: 15,
    center: coords
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);
  var directionsDisplay = new google.maps.DirectionsRenderer({
    draggable: true,
    map: map,
    panel: document.getElementById('right-panel')
  });
  displayRoute(directionsService, directionsDisplay);


  function displayRoute(service, display) {
    service.route({
      origin: coords,
      destination: new google.maps.LatLng(5.409722, 100.313319),
      provideRouteAlternatives: true,
      travelMode: google.maps.TravelMode.DRIVING
    }, function(response, status) {
      if (status === google.maps.DirectionsStatus.OK) {
        display.setDirections(response);
      } else {
        alert('Could not display directions due to: ' + status);
      }
    });
  }
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="right-panel"></div>

方向不显示我当前的位置和目的地

1 个答案: