Показать сообщение отдельно
  #1 (permalink)  
Старый 21.05.2013, 22:37
Новичок на форуме
Отправить личное сообщение для stepandra Посмотреть профиль Найти все сообщения от stepandra
 
Регистрация: 21.05.2013
Сообщений: 7

Google Maps Api и Матрица маршрутов
у меня есть вот такой код, который выводит расстояние и время между любыми точками мира. Также там есть маркеры, которые делят расстояние на 10 участков. Мне надо найти время до каждого маркера с помощью еще одного запроса. Но вот как это сделать я не знаю. Прошу помощи. Вот код.
<!DOCTYPE html>
<html>
  <head>
    <title>Distance Matrix service</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <meta charset="utf-8">
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
 
      #map-canvas {
        height: 100%;
        width: 50%;
      }
      #content-pane {
        float:right;
        width:48%;
        padding-left: 2%;
      }
      #outputDiv {
        font-size: 11px;
      }
    </style>
    <script>
var map;
var geocoder;
var bounds = new google.maps.LatLngBounds();
var markersArray = [];
var waypts = [];
 
 
 
var destinationIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=D|FF0000|000000';
var originIcon = 'https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=O|FFFF00|000000';
var directionsDisplay;
var directionsDisplay1;
var directionsService = new google.maps.DirectionsService();
var directionsService1 = new google.maps.DirectionsService();
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var opts = {
    center: new google.maps.LatLng(55.53, 9.4),
    zoom: 10,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), opts);
   directionsDisplay.setMap(map);
  geocoder = new google.maps.Geocoder();
}
 
 
function calcRoute() {
  
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  
  
  
 
  var request = {
      origin: start,
      destination: end,
     
     
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');
      var f;
      var f1;
      summaryPanel.innerHTML = '';
 
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        f=(route.legs[i].end_location.lat()-route.legs[i].start_location.lat())/10 ;
        f1=(route.legs[i].end_location.lng()-route.legs[i].start_location.lng())/10;
                        summaryPanel.innerHTML +=' Координаты начала '+ route.legs[i].start_location + ' среднее ';
                        summaryPanel.innerHTML += f  + '<br>';
                        summaryPanel.innerHTML += f1  + '<br>';
                        summaryPanel.innerHTML += 'Время:'+route.legs[i].duration.text + '<br><br>';
                        
var markers = [];
for(var k=1; k<=9; ++k)
  markers[k-1] = new google.maps.Marker({
    position: new google.maps.LatLng(route.legs[i].start_location.lat()+f*k, route.legs[i].start_location.lng()+f1*k),
    icon: destinationIcon,
    map: map
  });
 
 
 
                       
                    
      
 
      
         
                    
      
 
      }  
    }
  });
}
 
 
function deleteOverlays() {
 
 
 
 
  for (var i = 0; i < markers.length; i++) {
    markers[i].setMap(null);
  }
  markers = [];
}
 
google.maps.event.addDomListener(window, 'load', initialize);
 
    </script>
  </head>
  <body>
    <div id="content-pane">
     
      <style>
      .outputDiv
      {
      font-size:35px;
      
      }
      
      </style>
     <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
      <div id="directions_panel1" style="margin:20px;background-color:#FFEE77;"></div>
    <input type="text" name="start" id="start"    >
        
        <input type="text" name="end" id="end"  >
      <div id="outputDiv"></div>
 
      <input type="submit" onclick="calcRoute();">
       <input type="submit" onclick="calcRoute1();">
    </div>
    <div id="map-canvas"></div>
  </body>
</html>

Заранее спасибо за помощь!
Ответить с цитированием