獲取風格地圖中的指示

Question

我想創建一個黑白地圖，女巫顯示方向和旅行時間。我確實讓地圖顯示正確，但是當我嘗試添加指示時，它停止顯示任何內容。

這是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']};