javascript - Google Maps V3，javascript折线捕捉到 map 上有大量点的道路

Question

在这个问题上停留了一段时间，我一直在研究一个可以跟踪的系统司机通过手机上的应用程序。现在我正在努力在带有谷歌地图的网站上展示它。每 100 米一个 GPS 位置记录在数据库中。

你可以想象我可以在 map 上有数百甚至数千个点，下面的代码在点之间绘制相对平滑的折线，即使是在大量点之间也是如此。

我希望这些多段线捕捉到最近的道路，以便在 map 上多段线在道路上而不是在拐 Angular 处等。此外，将来我想以良好的准确性计算行进的距离。

我已经在 map 上的点之间尝试了 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 = [];
}

Answer 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);
                    }
                }
            });
        }
    }