javascript - 在样式化 map 中获取方向

Question

我想创建一个显示方向和行进时间的黑白 map 。我确实让 map 显示正确，但当我尝试添加路线时，它停止显示任何内容。

这是 HTML 代码:

<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&language=nl"></script>

这是 Javascript:

function initMap() {

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var start = new google.maps.LatLng(51.715907, 5.382797);
var end = new google.maps.LatLng(51.688518, 5.286638);
var request = (origin: start, destination: end, travelMode: google.maps.TravelMode[DRIVING]);

  var PiCastMapsMapType = new google.maps.StyledMapType([
    { featureType: 'landscape', stylers: [
      { hue: '#00ffff' },
      { saturation: -100 },
      { lightness: -100 }
    ]},{ featureType: 'water', stylers: [
      { saturation: -100 },
      { lightness: -80 }
    ]},{ featureType: 'road', elementType: 'labels', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'road.highway', stylers: [
      { saturation: -100 },
      { lightness: 100 },
      { visibility: 'simplified' }
    ]},{ featureType: 'road.highway', elementType: 'labels', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'road.arterial', stylers: [
      { saturation: -100 },
      { lightness: 40 }
    ]},{ featureType: 'road.local', stylers: [
      { saturation: -100 },
      { lightness: 30 }
    ]},{ featureType: 'transit.station', elementType: 'labels', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'administrative.country', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'administrative.province', elementType: 'labels', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'administrative.locality', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'administrative.neighborhood', stylers: [
      { visibility: 'off' }
    ]},{ featureType: 'poi', stylers: [
      { visibility: 'off' }
    ]}], {name: 'PI Cast Maps'});

  directionsDisplay = new google.maps.DirectionsRenderer();
  var mapOptions = {
    zoom: 12,
    center: start,
    disableDefaultUI: true }

  var map = new google.maps.Map(document.getElementById('map'), mapOptions);
  directionsDisplay.setMap(map);

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

  map.mapTypes.set('picastmaps', PiCastMapsMapType);
  map.setMapTypeId('picastmaps');

}

这是 CSS:

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

我知道问题出在 javascript 中，但我不知道如何解决...如果有人能帮助我，我将不胜感激!

Answer 1

问题出在这一行:

var request = (origin: start, destination: end, travelMode: google.maps.TravelMode[DRIVING]);

创建新对象需要大括号而不是圆括号，出行方式应该是字符串，因为对象 DRIVING 不存在。

 var request = {origin: start, destination: end, travelMode: google.maps.TravelMode['DRIVING']};