使用从 JSON 中提取的坐标捕捉到道路答案

【问题标题】：Snap to road with coordinates pulled from JSON使用从 JSON 中提取的坐标捕捉到道路
【发布时间】：2016-03-08 11:43:47
【问题描述】：

我已经搜索过了，但似乎没有什么对我有用。我有以下问题：我从 JSON 文件中获取坐标。所有这些都应通过一条折线连接，该折线应捕捉到最近的道路。我已经成功地使用了标记和多段线，但它们只是与一条直接的直线多段线相连。如何让这些折线捕捉到道路？

这是我现有的仅绘制折线的代码：

function initialize() {
    var myLatlng = new google.maps.LatLng(data[0].waypoints[0].lat,data[0].waypoints[0].long);
    var mapOptions = {
        zoom: 10,
        center: myLatlng
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    $.each(data[0].waypoints, function(i, object) {
        i = i++;        
        var track = [
            {lat: data[0].waypoints[i].lat, lng: data[0].waypoints[i].long},
            {lat: data[0].waypoints[i+1].lat, lng: data[0].waypoints[i+1].long}
        ];

        console.log(data[0].waypoints[i].lat, data[0].waypoints[i].long);

        var trackPath = new google.maps.Polyline({
            path: track,
            geodesic: true,
            strokeColor: '#FF0000',
            strokeOpacity: 0.5,
            strokeWeight: 5
        });
        trackPath.setMap(map);      

    }); 
}
initialize();

【问题讨论】：

你试过Roads API，我想这就是它的用途。
嗨@SteadyRollin 你如何添加标记以实现快速道路？

标签： javascript jquery google-maps google-maps-api-3 google-maps-markers

【解决方案1】：

您可能正在寻找Google Maps API Directions Service：

返回一系列航路点的多部分方向。方向有多种交通方式可供选择。

以下示例显示如何根据提供的坐标打印路线：

function printRoute(data) {
   
    var center = new google.maps.LatLng(data.waypoints[0].lat, data.waypoints[0].long);
    var mapOptions = {
        zoom: 6,
        center: center
    }
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var directionWaypoints = $.map(data.waypoints,function(waypoint,i){
        if(i > 0 && i < data.waypoints.length - 1) {
            return {
               "location" :  new google.maps.LatLng(waypoint.lat, waypoint.long),
               "stopover" : false
           };       
        }
    });
    
    
    var request = {
       origin: new google.maps.LatLng(data.waypoints[0].lat, data.waypoints[0].long),
       destination: new google.maps.LatLng(data.waypoints[data.waypoints.length - 1].lat, data.waypoints[data.waypoints.length - 1].long),
       travelMode: google.maps.TravelMode.DRIVING,
       waypoints: directionWaypoints  
    };
    calculateAndDisplayRoute(map,request);
}

function calculateAndDisplayRoute(map,request) {
    var directionsService = new google.maps.DirectionsService;
    var directionsDisplay = new google.maps.DirectionsRenderer;
    directionsDisplay.setMap(map);

    directionsService.route(request, function (response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            console.log('Directions request failed due to ' + status);
        }
    });
}


$(function() {
    $.getJSON("https://gist.githubusercontent.com/vgrem/7b6988c91722e7c84b55/raw/81bd952535e5b9cc7949a0ec14923086ca20f8b9/data.json")
        .done(function(data) {
             printRoute(data);
        });
});

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map-canvas {
    height: 100%;
}

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script> 
<div id="map-canvas"></div>

Plunker

【讨论】：