Как да промените текста на адреса, върнат в DirectionsLeg

Опитвам се да променя текста, който се показва в върнатите указания от API на Google Javascript. Искам да добавя име на фирма в началото на всеки от адресите, върнати във всеки етап от маршрута. Това ще помогне на нашите потребители да идентифицират по-добре местоположението.

Тествам с този код (в моя конкретен пример има 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 след това, оригиналните указания са там.

Намерих много примери онлайн за промяна на това свойство и ми се струва странно, че само първият крак работи, докато останалите не. Все още съм сравнително нов в API на Google Maps, така че определено не изключвам грешка на разработчиците. Моля за съвет, благодаря!

Чарлз

Пример за изход


google-maps google-maps-api-3
person Charles    schedule 20.04.2017    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Изглежда, че етикетите на панела 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;

доказателство за концептуална цигулка

екранна снимка на получената карта

кодов фрагмент:

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>

person geocodezip    schedule 20.04.2017