谷歌地图方向答案

【问题标题】：Google maps direction谷歌地图方向
【发布时间】：2013-08-20 02:13:02
【问题描述】：

我创建了一个代码来在地图上绘制一个绘制方向，但使用折线，因为使用航点我只能看到八个点。

首先我有一个函数nArray()，它返回一个值，就像这个控制台中显示的那样：

 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]

现在我想将所有对象（纬度、经度）设置为一个点：

<!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>

如何从nArray获取每个对象的经纬度？

【问题讨论】：

标签： javascript jquery google-maps implementation polyline

【解决方案1】：

您目前已经获得了循环中每个对象的纬度和经度，但有两个问题：

要获得与使用带航点的 DirectionsRenderer 时相同的结果，您必须使用结果（例如 result.routes[0].legs[0].start_location ）设置标记的位置，否则标记将不会放置在路线上
你应该忘记这种方法超过航点限制，每秒有 10 个请求的限制，你很快就会得到响应“OVER_QUERY_LIMIT”

【讨论】：

那将是最好的。但是当您需要超过 8 个航点时，这将不起作用（没有商业许可证），可能的选项：在请求之间设置延迟（这样您就不会达到每秒的限制），当数组包含超过 10点（否则您不需要解决方法，航点将起作用），将数组拆分为具有 10 个位置的部分并请求这些点的方向......使用航点（例如，当您有 15 个位置时，这将需要 2 个请求而不是14 与您当前的策略）
谢谢，我找到了一些例子，但我需要再次将我的 lat,lng 值放到这个函数中：stackoverflow.com/questions/18299068/…