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

获取Styled Maps中的路线

1 个答案: