指定在Google地图中使用的确切路线

Question

指定在Google地图中使用的确切路线

Cam*_*ron 7 google-maps google-maps-api-3

是否可以显示Google Maps API中的确切路线？

基本上我有一个纬度和长坐标(超过100个点)的列表,我想用它来显示某人使用Google地图中的路线API所带来的旅程.

例如,如果我使用开始和结束坐标来绘制它,如下所示:

var icon1 = 'traffic-green.png';
var icon2 = 'traffic-red.png';

function initMap()
{
    var pointA = new google.maps.LatLng(51.7519, -1.2578),
        pointB = new google.maps.LatLng(50.8429, -0.1313),
        myOptions = {
            zoom: 7,
            center: pointA,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        },

        map = new google.maps.Map(document.getElementById('map'), myOptions),

        directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map,
            suppressMarkers: true,
            polylineOptions: {
                strokeWeight: 4,
                strokeOpacity: 1,
                strokeColor: '#ff0000' 
            }
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            icon: icon1,
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            icon: icon2,
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB)
{
    directionsService.route({
        origin: pointA,
        destination: pointB,
        avoidTolls: true,
        avoidHighways: false,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

initMap();

Run Code Online (Sandbox Code Playgroud)

仅指定开始和结束坐标的问题,显示的路线是根据谷歌地图的最短路线,并不一定是实际路线,因为它不知道在旅途中导航到的其他坐标.例如,一个人可能会使用后道,绕道其他地方,等等.

我查看了使用API的Waypoints部分https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints但显然仅限于10分,所以这并不是真的会削减它...

是否有另一种方法可以传递多个坐标,然后可以在地图上绘制出旅程？我试图展示一个人走的路(类似于你在Strava之类的东西上看到的).

Answer 1

小智 3

这里有一个如何克服 10 个航路点限制的简单示例。我用 15 个路径点对其进行了测试，但没有添加任何错误捕获。

如果您在此处搜索“多个路径点”，您将获得许多示例，因此您可以选择最适合您的任务的示例。

享受吧，莱因哈特

<!DOCTYPE html>
<html>
<head>
<title> Multiple Waypoints </title>
<style type="text/css"> #map-canvas { height: 500px }; </style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.22"></script>
<script type="text/javascript">

var map = null;
var directionsService = null;

function init() {
	var mapOptions = {
		center: new google.maps.LatLng(51.429772, 6.83753),
		zoom: 13,
	};
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	info = document.getElementById('info');
	pointsToPath();
}

var path = [];
function pointsToPath () {
	var sArray = [
	"51.432929,6.806288",
	"51.432608,6.823883",
	"51.430039,6.826715",
	"51.418372,6.82354",
	"51.41607,6.827402",
	"51.418158,6.833668",
	"51.422065,6.839762",
	"51.420406,6.846113",
	"51.418693,6.855812",
	"51.425384,6.85401",
	"51.431431,6.856413",
	"51.435283,6.853495",
	"51.434909,6.838045",
	"51.434534,6.83135",
	"51.435604,6.824312"
	];

	for (var i=0; i < sArray.length; i++) {
		s = sArray[i].split(",");
		point = new google.maps.LatLng(s[0],s[1]);
		path.push(point);
	}
	batchJobs();
}

var batch = [];
var items = 8;
function batchJobs() {

	for (var i=0; i < path.length; i++) {
		batch.push(path[i]);
		if (i == items || i == path.length - 1) {
			calcRoute();
			batch = [path[i]];
			items += items
		}
	}
}


function calcRoute() {

	rStart = batch[0];
	rEnd =   batch[batch.length - 1];

	waypoints = [];
	for (var i = 1; i < batch.length - 2; i++) {
		waypoints.push({
        location: batch[i],
        stopover: true
      });
    }

    var request = {
		origin: rStart,
		destination: rEnd,
		waypoints: waypoints,
		travelMode: google.maps.TravelMode.DRIVING
	};

	directionsService = new google.maps.DirectionsService;
	poly = new google.maps.Polyline({ map: map });
	line = [];

	directionsService.route(request, function(result, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			for(var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
			    line.push(result.routes[0].overview_path[i]);
			  }
			poly.setPath(line);
		} else {
			alert('Directions request failed due to ' + status);
		}
	});
} //calcRoute()


google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
  <body>
	<div id="map-canvas"></div>
	<div id="info" >0 / 0</div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	980 次
最近记录：	9 年，6 月前