无法在Google Maps API中的标记之间绘制路线

Question

i am pretty new to web development. 我是Web开发的新手。 In the above html file i am calling the google maps api and placing markers. 在上面的html文件中，我正在调用google maps api并放置标记。 My goal is to have shortest routes between the markers. 我的目标是使标记之间的路径最短。 With this html file i am getting the required points clearly marked on the google maps but not the paths between them. 有了这个html文件，我在google地图上清楚地标记了所需的点，但是没有它们之间的路径。 Please help. 请帮忙。

 <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Reverse Geocoding</title>
        <style>
          /* 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;
          }
          #floating-panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            width: 350px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
          }
          #latlng {
            width: 225px;
          }
        </style>
      </head>
      <body>

        <div id="map"></div>

        <script>

           var map;
           var geocoder;



          function initMap() {
            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer;
            var map = new google.maps.Map(document.getElementById('map'), {
              zoom: 8,
              center: {lat: -33.931, lng: 151.257},
              mapTypeId: google.maps.MapTypeId.ROADMAP
            });



          var marker, i;




          var locations = [
                ['Manly Beach', -32.80010128657071, 151.28747820854187, 2],
                ['Bondi Beach', -33.890542, 151.274856, 4],
                ['Coogee Beach', -33.923036, 151.259052, 5],
                ['Maroubra Beach', -33.950198, 151.259302, 1],
                ['Cronulla Beach', -34.028249, 151.157507, 3],
                ['Canly Beach', -33.90010128657071, 151.28747820854187, 6],
                ['Pukuni', -32.90010128657071, 151.28747820854187, 7],
                ['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8],
                ['Narumi', -30.90010128657071, 151.28747820854187, 9],
            ];

        var request = {
        travelMode: google.maps.TravelMode.DRIVING
        };


        for (i = 0; i < locations.length; i++) {
          marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        //Shows marker names and related content
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));

        if (i == 0) request.origin = marker.getPosition();
        else if (i == locations.length - 1) request.destination = marker.getPosition();
        else {
          if (!request.waypoints) request.waypoints = [];
          request.waypoints.push({
            location: marker.getPosition(),
            stopover: true,
          });
        }
      }


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


    google.maps.event.addDomListener(window, "load", initialize);

        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=xxxx&callback=initMap">
        </script>
      </body>
    </html>

I have specifically deleted the key. 我专门删除了密钥。

Answer 1

You aren't setting the map property of the DirectionsRenderer . 您没有设置DirectionsRenderer的map属性。

Add: 加：

directionsDisplay.setMap(map);

after the map is created. 创建map后。

proof of concept fiddle 概念证明

code snippet: 代码段：

 var map; var geocoder; function initMap() { var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var infowindow = new google.maps.InfoWindow(); var map = new google.maps.Map(document.getElementById('map'), { zoom: 8, center: { lat: -33.931, lng: 151.257 }, mapTypeId: google.maps.MapTypeId.ROADMAP }); directionsDisplay.setMap(map); // <=================== add this line var marker, i; var locations = [ ['Manly Beach', -32.80010128657071, 151.28747820854187, 2], ['Bondi Beach', -33.890542, 151.274856, 4], ['Coogee Beach', -33.923036, 151.259052, 5], ['Maroubra Beach', -33.950198, 151.259302, 1], ['Cronulla Beach', -34.028249, 151.157507, 3], ['Canly Beach', -33.90010128657071, 151.28747820854187, 6], ['Pukuni', -32.90010128657071, 151.28747820854187, 7], ['Chulkuni Beach', -31.90010128657071, 151.28747820854187, 8], ['Narumi', -30.90010128657071, 151.28747820854187, 9], ]; var request = { travelMode: google.maps.TravelMode.DRIVING }; for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({ position: new google.maps.LatLng(locations[i][1], locations[i][2]), map: map }); //Shows marker names and related content google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(locations[i][0]); infowindow.open(map, marker); } })(marker, i)); if (i == 0) request.origin = marker.getPosition(); else if (i == locations.length - 1) request.destination = marker.getPosition(); else { if (!request.waypoints) request.waypoints = []; request.waypoints.push({ location: marker.getPosition(), stopover: true, }); } } directionsService.route(request, function(result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(result); } }); }

 #map { height: 100%; } 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; } #floating-panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; width: 350px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; } #latlng { width: 225px; }

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

无法在Google Maps API中的标记之间绘制路线

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-06-21 17:23:14

无法在Google Maps API中的标记之间绘制路线

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-06-21 17:23:14

解决方案1
0 已采纳 2018-06-21 17:23:14