如何更改DirectionsLeg中返回的地址文本

Question

我正在尝试更改Google Javascript API中返回路线中显示的文字。我想在路线的每一段返回的每个地址的前面添加一个商业名称。这些将有助于我们的用户更好地识别位置。

我正在使用此代码进行测试（在我的特定示例中，路径中有8条腿：

        response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
        response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
        response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
        response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
        response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
        response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
        response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
        response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;

        directionsDisplay.setDirections(response);

问题是我的更改只出现在第一站，如下面链接的屏幕截图所示。查询时，请求对象在进入setDirections方法之前确实反映了我的更改。但是，当我查询innerHTML之后，原始方向就在那里。

我在网上发现了很多关于这个属性被改变的例子，我觉得很奇怪只有第一条腿正在工作，而剩下的没有。我仍然是Google Maps API的新手，所以我绝对不排除开发人员错误。请指教，谢谢！

查尔斯

Output Example

Answer 1

看起来第一个方向之后的DirectionsDisplay面板上的标签使用的是end_address，而不是start_address。

将标签添加到两者。

  response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
  response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
  response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
  response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
  response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
  response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
  response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
  response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
  response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
  response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
  response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
  response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
  response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
  response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
  response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
  response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;

proof of concept fiddle

代码段

function initialize() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);
  calculateAndDisplayRoute(directionsService, directionsDisplay);
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  waypts.push({
    location: "New York, NY",
    stopover: true
  });
  waypts.push({
    location: "Boston, MA",
    stopover: true
  });
  waypts.push({
    location: "Chicago, IL",
    stopover: true
  });
  waypts.push({
    location: "Madison, WI",
    stopover: true
  });
  waypts.push({
    location: "Denver, CO",
    stopover: true
  });
  waypts.push({
    location: "Salt Lake City UT",
    stopover: true
  });
  waypts.push({
    location: "Mesa, AZ",
    stopover: true
  });

  waypts.push({
    location: "Las Vegas, NV",
    stopover: true
  });



  directionsService.route({
    origin: "Newark, NJ",
    destination: "Los Angeles, CA",
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: 'DRIVING'
  }, function(response, status) {
    if (status === 'OK') {
      response.routes[0].legs[0].start_address = 'Store #0: ' + response.routes[0].legs[0].start_address;
      response.routes[0].legs[1].start_address = 'Store #1: ' + response.routes[0].legs[1].start_address;
      response.routes[0].legs[2].start_address = 'Store #2: ' + response.routes[0].legs[2].start_address;
      response.routes[0].legs[3].start_address = 'Store #3: ' + response.routes[0].legs[3].start_address;
      response.routes[0].legs[4].start_address = 'Store #4: ' + response.routes[0].legs[4].start_address;
      response.routes[0].legs[5].start_address = 'Store #5: ' + response.routes[0].legs[5].start_address;
      response.routes[0].legs[6].start_address = 'Store #6: ' + response.routes[0].legs[6].start_address;
      response.routes[0].legs[7].start_address = 'Store #7: ' + response.routes[0].legs[7].start_address;
      response.routes[0].legs[0].end_address = 'Store #1: ' + response.routes[0].legs[0].end_address;
      response.routes[0].legs[1].end_address = 'Store #2: ' + response.routes[0].legs[1].end_address;
      response.routes[0].legs[2].end_address = 'Store #3: ' + response.routes[0].legs[2].end_address;
      response.routes[0].legs[3].end_address = 'Store #4: ' + response.routes[0].legs[3].end_address;
      response.routes[0].legs[4].end_address = 'Store #5: ' + response.routes[0].legs[4].end_address;
      response.routes[0].legs[5].end_address = 'Store #6: ' + response.routes[0].legs[5].end_address;
      response.routes[0].legs[6].end_address = 'Store #7: ' + response.routes[0].legs[6].end_address;
      response.routes[0].legs[7].end_address = 'Store #8' + response.routes[0].legs[7].end_address;
      // directionsDisplay.setDirections(response);


      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      directionsDisplay.setPanel(summaryPanel);
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
<div id="directions-panel"></div>