谷歌地图API不渲染多边形线

Question

我已经尝试了所有方法，但方向线未显示，我知道有一个小错误，我没有看到或理解方向将显示到最近的标记，但我将静态两个标记标记为该项目是智能汽车api集成，抱歉简短的代码，现在我更新了完整的代码

     var loc = [];
var locations_array = [];
var small_time = 0;
var destination;
function createMap() 
{
  var x = 42.358329;
  var y = -71.056623;
  const KEY = "AIzaSyAPzNVajaVzHp6UQjk7-E7wu6DUPSx-E8A";

  var loc_latlng = 
  [
    [42.359130,-71.055250],
    [42.360950,-71.054920],
    [42.360280, -71.057140],
    [42.357360,-71.060690],
    [42.348860, -71.064780],
    [40.02049, -105.25620],
    [42.348860,-71.064780],
    [42.352050, -71.068320],
    [42.348300,-71.077610],
    [42.349232, -71.079529],
    [42.348470, -71.083710],
    [42.346570, -71.083840],
    [42.348180, -71.080710],
    [39.77277, -104.79596],
    [42.360950,-71.054920]
  ];

  var locations = 
  [
    '20 Clinton St Boston Massachusetts 02109',
    '26 North St Boston MA 02109',
    '90 Tremont St Boston MA 92108',
    '821 Washington St Boston MA 02111',
    '1710 29th St, Boulder, CO 80301, United States',
    '100 Stuart St Boston MA 02116',
    '200 Boylston St Boston MA 02116',
    '10 Huntington Ave Boston Massachusetts 02116',
    '61 Exeter St Boston MA 02116',
    '800 Boylston Street Boston Massachusetts 02199',
    '39 Dalton St Boston MA 02199',
    '776 Boylston St Boston Massachusetts 02199',
    '4310 Airport Way, Denver, CO 80239, United States',
    '20 Clinton St Boston Massachusetts 02109'  ];

  var origin1 = {lat: x , lng: y};
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix(
  {
    origins: [origin1],
    destinations:  locations,
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
    }, function(response, status) 
    {
      if (status == 'OK') 
      {

        var map = new google.maps.Map(document.getElementById('map'), 
        {
          zoom: 17,
          center: new google.maps.LatLng(origin1),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        marker = new google.maps.Marker(
        {
          position: new google.maps.LatLng(origin1),
          map: map,
        });

        var nearest_time = 0;

        for (var i = 0; i < response.rows[0].elements.length; i++) 
        {
          if(nearest_time == 0)
          {
            nearest_time = response.rows[0].elements[i].duration.value;
          }

          if(nearest_time > response.rows[0].elements[i].duration.value)
          {
            var destination = {lat: loc_latlng[i][0] , lng: loc_latlng[i][1]};

            // marker = new google.maps.Marker(
            // {
              // position: new google.maps.LatLng(small_time),
              // map: map,
            // });
          }
        }

        console.log(destination);

        marker = new google.maps.Marker(
        {
          position: new google.maps.LatLng(destination),
          map: map,
        });


        var directionsService = new google.maps.DirectionsService();
        var directionsRenderer = new google.maps.DirectionsRenderer();
        var request = 
        {
          origin: origin1,
          destination: destination,
          travelMode: 'DRIVING'
        };

        directionsService.route(request, function(result, status) 
        {
          if (status == 'OK') 
          {
            directionsRenderer.setDirections(result);
          }
        });
      }
    });





}

createMap();

function createMarker(origin1,small_time)
{


  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);

    var request = 
    {
      origin: origin1 ,
      destination: small_time,
      travelMode: google.maps.DirectionsTravelMode.DRIVING,
      transitOptions: {
      departureTime: new Date(1337675679473),
      modes: ['BUS'],
      routingPreference: 'FEWER_TRANSFERS'
    }
  };

  // marker.setPosition(map.getCenter());
}

Answer 1

您没有将directionRenderer添加到地图：

var directionsRenderer = new google.maps.DirectionsRenderer({map: map});

proof of concept fiddle

代码段：

var loc = [];
var locations_array = [];
var small_time = 0;
var destination;

function createMap() {
  var x = 42.358329;
  var y = -71.056623;
  const KEY = "AIzaSyAPzNVajaVzHp6UQjk7-E7wu6DUPSx-E8A";

  var loc_latlng = [
    [42.359130, -71.055250],
    [42.360950, -71.054920],
    [42.360280, -71.057140],
    [42.357360, -71.060690],
    [42.348860, -71.064780],
    [40.02049, -105.25620],
    [42.348860, -71.064780],
    [42.352050, -71.068320],
    [42.348300, -71.077610],
    [42.349232, -71.079529],
    [42.348470, -71.083710],
    [42.346570, -71.083840],
    [42.348180, -71.080710],
    [39.77277, -104.79596],
    [42.360950, -71.054920]
  ];

  var locations = [
    '20 Clinton St Boston Massachusetts 02109',
    '26 North St Boston MA 02109',
    '90 Tremont St Boston MA 92108',
    '821 Washington St Boston MA 02111',
    '1710 29th St, Boulder, CO 80301, United States',
    '100 Stuart St Boston MA 02116',
    '200 Boylston St Boston MA 02116',
    '10 Huntington Ave Boston Massachusetts 02116',
    '61 Exeter St Boston MA 02116',
    '800 Boylston Street Boston Massachusetts 02199',
    '39 Dalton St Boston MA 02199',
    '776 Boylston St Boston Massachusetts 02199',
    '4310 Airport Way, Denver, CO 80239, United States',
    '20 Clinton St Boston Massachusetts 02109'
  ];

  var origin1 = {
    lat: x,
    lng: y
  };
  var service = new google.maps.DistanceMatrixService();
  service.getDistanceMatrix({
    origins: [origin1],
    destinations: locations,
    travelMode: 'DRIVING',
    unitSystem: google.maps.UnitSystem.METRIC,
    avoidHighways: false,
    avoidTolls: false
  }, function(response, status) {
    if (status == 'OK') {

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: new google.maps.LatLng(origin1),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

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

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(origin1),
        map: map,
      });

      var nearest_time = 0;

      for (var i = 0; i < response.rows[0].elements.length; i++) {
        if (nearest_time == 0) {
          nearest_time = response.rows[0].elements[i].duration.value;
        }

        if (nearest_time > response.rows[0].elements[i].duration.value) {
          var destination = {
            lat: loc_latlng[i][0],
            lng: loc_latlng[i][1]
          };

          // marker = new google.maps.Marker(
          // {
          // position: new google.maps.LatLng(small_time),
          // map: map,
          // });
        }
      }

      console.log(destination);

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(destination),
        map: map,
      });


      var directionsService = new google.maps.DirectionsService();
      var directionsRenderer = new google.maps.DirectionsRenderer({
        map: map
      });
      var request = {
        origin: origin1,
        destination: destination,
        travelMode: 'DRIVING'
      };

      directionsService.route(request, function(result, status) {
        if (status == 'OK') {
          directionsRenderer.setDirections(result);
        }
      });
    }
  });





}

function createMarker(origin1, small_time) {


  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);

  var request = {
    origin: origin1,
    destination: small_time,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    transitOptions: {
      departureTime: new Date(1337675679473),
      modes: ['BUS'],
      routingPreference: 'FEWER_TRANSFERS'
    }
  };

  // marker.setPosition(map.getCenter());
}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

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

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=createMap">
</script>