Question

I've created a code to draw on a map a drawing direction but with polyline because with waypoints I can just see eight points.

First I have a function nArray() which returns me a value like the one shown in this console:

 Array[5]
    0: Object
    1: Object
         DISTANCE_FROM_PREVIOUS_OBJECT_LOCATION: 2.087970147789207
         lat: "48.866588"
         leftPosition: 183
         lng: "2.309037999999987"
         topPosition: 57
            __proto__: Object
    2: Object
    3: Object
    4: Object
    length: 5
    __proto__: Array[0]

Now I want to all objects (latitude, longitude) set as a point in:

<!DOCTYPE html>
<html>
    <head>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
        <script>
        var map = null;
        var directionService = null;
        var directionsRenderer = null;

        var bigArray = nArray();

        function initialize() {
          var mapOptions = {
            center: new google.maps.LatLng(35.75936182169444, -90.35907120698232),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            zoom: 4
          };
          map = new google.maps.Map(document.getElementById("map"), mapOptions);
          directionService = new google.maps.DirectionsService();
          directionsRenderer = new google.maps.DirectionsRenderer({ map: map });      
        }

        function drawDirections(myPath) {
            var myLine = new google.maps.Polyline({
                path: myPath,
                strokeColor: '#ff0000',
                strokeOpacity: 1.0,
                strokeWeight: 2
            });
            myLine.setMap(map);
        }

        function drawRoutes() {
            var i;
            var npts = bigArray.length - 1;

            for (i = 0; i < npts; i++) {
                var marker = new google.maps.Marker({
                  map: map,
                  position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
                });
                var request = {
                  origin: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng),
                  destination: new google.maps.LatLng(bigArray[i + 1].lat, bigArray[i + 1].lng),
                  travelMode: google.maps.DirectionsTravelMode.DRIVING
                }

                directionService.route(request, function(result, status) {
                    //route = result.routes[0];
                    if (status == google.maps.DirectionsStatus.OK) {
                        drawDirections(result.routes[0].overview_path);
                    }
                });
            }

            var marker = new google.maps.Marker({
              map: map,
              position: new google.maps.LatLng(bigArray[i].lat, bigArray[i].lng)
            });
        }
        </script>
    </head>
    <body onload="initialize();">
        <div id="map" style="width: 500px; height: 400px;"></div>
        <input type="button" onclick="drawRoutes()" value="Draw Routes" />
    </body>
</html>

How to get the latitude and longitude for every object from nArray?

Était-ce utile?

La solution

You currently already get latitude and longitude for every object in your loop, but there are 2 issues:

  1. to get the same result as when you use the DirectionsRenderer with waypoints, you must use the result(e.g. result.routes[0].legs[0].start_location ) to set the position of the Markers, otherwise the Markers will not be placed on the route

  2. you should forget this approach to exceed the waypoints-limit, there is a limit of 10 requests per second, you soon will get the response "OVER_QUERY_LIMIT"

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top