Question

我已经搜索过了，但似乎没有什么对我有用。我有以下问题：我从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();

Answer 1

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

返回一系列航路点的多部分路线。方向有几种运输方式可供选择。

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

＆＃13;

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

＆＃13;

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map-canvas {
    height: 100%;
}

＆＃13;

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

＆＃13;

Plunker

使用从JSON拉出的坐标对齐道路

1 个答案: