谷歌地图V3,javascript折线在地图上与大量的点对齐

时间:2014-07-08 13:38:39

标签: javascript google-maps google-polyline

现在已经坚持了一段时间,我一直在研究一个跟踪的系统 司机通过他们的手机上的应用程序。现在我正在使用谷歌地图在网站上展示这一点。每隔100米,数据库中会记录一个GPS位置。

你可以在地图上创建数百甚至数千个点,下面的代码可以在相对平滑的点之间绘制折线,即使数量也很多。

我希望这些折线能够捕捉到最近的道路,以便在地图上折线在路上而不是在角落等旁边。同样在将来我想要准确地计算出行进的距离。

我在地图上的点之间尝试过DirectionsService,但它似乎有8或10的限制。

我很难找到遇到同样问题的其他人。

任何帮助或建议都会很好。

下面是我用来绘制折线的函数。

使polyLines数组成为全局数据,因此未在此函数中声明

function drawLines(userID, createdOn){
    var points = new Array;
    jQuery.ajax({
     type: "POST",
     url: "/wp-content/themes/default/ajax/get_coordinates.php",
     data: {userID: userID, createdOn: createdOn}
     }).done(function(msg) 
     {
        clearLines();
        var msg = JSON.parse(String(msg));

        for(var i = 0; i < msg.length; i++){
            points[i] = new google.maps.LatLng(msg[i].lat, msg[i].lng);
        }
        polyLines[0] = new google.maps.Polyline({
            path: points,
            strokeColor: "01357c",
            strokeOpacity: 1.0,
            strokeWeight: 3,
            geodesic: true,
            map: map 
        }); 
     });    
}
function clearLines(){
    for(var i = 0; i < polyLines.length; i++){
        polyLines[i].setMap(null);  
    }
    polyLines = [];
}

2 个答案:

答案 0 :(得分:1)

如果找到本教程,经过一些更多的研究之后,我还没有完全理解你在回答中想要做什么。

http://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/

通过一些修改,我使它适用于我的项目。唯一的缺点是我担心我每天仍然限制2500个请求。 由于航路点限制为10,大约可以得到25.000点,我应该能够每天连接。

function createBatches(userID, createdOn){
        jQuery.ajax({
         type: "POST",
         url: "/wp-content/themes/default/ajax/get_coordinates.php",
         data: {userID: userID, createdOn: createdOn}
         }).done(function(msg) 
         {
            var msg = JSON.parse(String(msg));
            var batches = new Array;
            var itemsPerBatch = 10; 
            var itemsCounter = 0;
            var wayptsExist = msg.length > 0;

            while(wayptsExist){
                var subBatch = [];
                var subitemsCounter = 0;

                for (var i = itemsCounter; i < msg.length; i++) {
                    subitemsCounter++;
                    subBatch.push({
                        location: new google.maps.LatLng(msg[i].lat,msg[i].lng),
                        stopover: true
                    });
                    if (subitemsCounter == itemsPerBatch)
                        break;
                }
                itemsCounter += subitemsCounter;
                batches.push(subBatch);
                wayptsExist = itemsCounter < msg.length;
                itemsCounter--;
            }
            calcRoute(batches); 
        });
    }
    function calcRoute(batches){
        var combinedResults;
        var directionsResultsReturned = 0;
        for(var i = 0; i < batches.length; i++) {
            var lastIndex = batches[i].length - 1;
            var start = batches[i][0].location;
            var end = batches[i][lastIndex].location;

            var waypts = [];
            waypts = batches[i];
            waypts.splice(0, 1);
            waypts.splice(waypts.length - 1, 1);

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    if (directionsResultsReturned == 0) {
                        combinedResults = result;
                        directionsResultsReturned++;
                    }
                    else {
                        combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(result.routes[0].legs);
                        directionsResultsReturned++;
                    }
                    if (directionsResultsReturned == batches.length){ 
                        directionsDisplay.setDirections(combinedResults);
                    }
                }
            });
        }
    }

答案 1 :(得分:0)

我有一个解决方案。 :3您可以将其剪切到多个位置路径并在googlemap方向使用&#34; waypoint&#34; ,1个方向限制10点:) ...

解决方案是:direction1的终点是direction2的起始点

示例代码

Array_point.push({
    waypoint : Array_Waypoint
});
Deriction_Array.push({
        travelmode : travelmode,
        polyline : Array_point
});