2014-01-03 2 views
7

Как передать массив объектов Latitude и Longitude in waypoints, а затем передать его в объект маршрутного маршрута для прокладки маршрута?Передача массива Lat Long в WayPoints API Google Maps 3

Если я хочу, чтобы пройти один лат долго мы бы передать его, как показано ниже

waypoints: 
[{ 
    location:new google.maps.LatLng(42.496403,-124.413128), 
    stopover:false 
}], 

Но как я передать массив широты и долготы?

Вы можете найти код, который я пытался (это бросает ошибку сценария):

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Lat long way points (LatLng)</title> 
<style type="text/css"> 
html { height: 100% } 
body { height: 100%; margin: 0px; padding: 0px } 
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 
    var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
    var myOptions = { 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: chicago 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    calcRoute(); 
    } 

    function calcRoute() { 
     var first=new google.maps.LatLng(42.496403,-124.413128); 
     var second=new google.maps.LatLng(42.496401,-124.413126); 
     var values=[first,second]; 
     alert(values[0]); 
     alert(values[1]); 
     var waypts=[]; 
     alert(values.length); 
    for(var i=0;i<=values.length;i++) 
    { 
    waypts.push({location:values[i],stopover:true}); 
    } 
    alert(waypts); 
    var request = { 
     origin: "1521 NW 54th St, Seattle, WA 98107 ", 
     destination: "San Diego, CA", 
     waypoints: waypts, 
     optimizeWaypoints: true, 
     travelMode: google.maps.DirectionsTravelMode.WALKING 
    }; 
    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"); 
     summaryPanel.innerHTML = ""; 
     // For each route, display summary information. 
     for (var i = 0; i < route.legs.length; i++) { 
      var routeSegment = i + 1; 
      summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />"; 
      summaryPanel.innerHTML += route.legs[i].start_address + " to "; 
      summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; 
      summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; 
     } 
     } else { 
     alert("directions response "+status); 
     } 
    }); 
    } 
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div> 
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
</div> 
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
</script> 
</body> 
</html> 
+0

Я не думаю, что я понимаю вопрос, почему вы хотите, чтобы массив быть передан объект путевой точки? Каждая путевая точка - всего лишь одна остановка вдоль маршрута? – Swires

+0

Вы хотите пропустить несколько путевых точек? Я считаю, что они используют отдельные объекты. – Swires

ответ

2

пример здесь должно помочь: https://developers.google.com/maps/documentation/javascript/directions?hl=cs#Waypoints

Эффективно назначить путевые точки объекта в массиве, например:

waypoints : waypointsArray 

Если массив содержит несколько точку объектов, например:

{ 
     location: LatLng, 
     stopover:true 
    } 

Надеюсь, это поможет.

+0

@ Swires: Спасибо за ссылку, у меня есть несколько остановок в виде лат между источником и местом назначения. В представленном вами примере он позволяет мне хранить массив внутри путевых точек, но это место. +1 для того же. Но как я могу сделать то же самое для Lat Long? – sTg

+0

Просто укажите LatLng вместо адреса в вышеуказанном вызове, как указано. Поэтому для каждого объекта в массиве у вас есть местоположение: yourLatLng. – Swires

+0

Да, я сделал это. Я прикрепил свой код. Но он выдает ошибку сценария Js. – sTg

10

это как добавить несколько точек

waypoints: [{location: first, stopover: false}, 
         {location: second, stopover: false}], 

полный код для образца

<!DOCTYPE html> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>Lat long way points (LatLng)</title> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0px; padding: 0px } 
     </style> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript"> 
      var directionDisplay; 
      var directionsService = new google.maps.DirectionsService(); 
      var map; 

      function initialize() { 
       directionsDisplay = new google.maps.DirectionsRenderer(); 
       var chicago = new google.maps.LatLng(41.850033, -87.6500523); 
       var myOptions = { 
        zoom: 6, 
        mapTypeId: google.maps.MapTypeId.ROADMAP, 
        center: chicago 
       }; 
       map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
       directionsDisplay.setMap(map); 
       calcRoute(); 
      } 

      function calcRoute() { 
       var first = new google.maps.LatLng(42.496403, -124.413128); 
       var second = new google.maps.LatLng(42.496401, -124.413126); 

       var request = { 
        origin: "1521 NW 54th St, Seattle, WA 98107 ", 
        destination: "San Diego, CA", 
        waypoints: [{location: first, stopover: false}, 
         {location: second, stopover: false}], 
        optimizeWaypoints: true, 
        travelMode: google.maps.DirectionsTravelMode.WALKING 
       }; 
       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"); 
         summaryPanel.innerHTML = ""; 
         // For each route, display summary information. 
         for (var i = 0; i < route.legs.length; i++) { 
          var routeSegment = i + 1; 
          summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />"; 
          summaryPanel.innerHTML += route.legs[i].start_address + " to "; 
          summaryPanel.innerHTML += route.legs[i].end_address + "<br />"; 
          summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />"; 
         } 
        } else { 
         alert("directions response " + status); 
        } 
       }); 
      } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="float:left;width:70%;height:100%;"></div> 
     <div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px"> 
      <div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 
     </div> 
     <script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
     </script> 
    </body> 
</html> 
+0

Я хочу, чтобы API-интерфейсы google отображали этот пример на своей странице! Спасибо. –

Смежные вопросы