Question

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

基本上我有一个lat和long坐标列表（超过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();

仅指定起点和终点坐标的问题，显示的路线是根据谷歌地图的最短路线，不一定是实际路线，因为它不知道在旅程中导航到的其他坐标是什么。例如。一个人可能会使用后路，沿途绕道其他地方，等等。

我研究过使用API https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints的Waypoints部分，但显然只限于10分，所以这并不是真的会削减它......

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

Answer 1

这是一个如何克服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>

Answer 2

我留下这个例子，它放了两条路线，两条路线都是同一个目的地，不同的路线使用Windows Mobile应用程序的捕获点不是很精确，但它们构成了路径。保留下面的例子。使用超过10个点的路线

我留下我们发布的页面的链接：Ruta

此处使用地图数据声明varible：

function initialize() {
    var myOptions = {
      center: new google.maps.LatLng(8.984444597839236,-79.56762313842773),
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);     

});

以下是包含两条路线的变量，新的google.maps.LatLng使用，包含两个cordenadas，更容易

    var ruta = [
    new google.maps.LatLng(8.999789020639756, -79.58511114120483),
    new google.maps.LatLng(8.999587682286911, -79.5849609375),
    new google.maps.LatLng(8.999158513318694, -79.58561539649963),
    new google.maps.LatLng(8.997245791109552, -79.58420991897583),
    new google.maps.LatLng(8.995311865023645, -79.582799077034),
    new google.maps.LatLng(8.993081214157364, -79.58127021789551),
    new google.maps.LatLng(8.990983012199813, -79.5797735452652),
    new google.maps.LatLng(8.989976294823254, -79.57899034023285),
    new google.maps.LatLng(8.988996067320308, -79.57812130451202),
    new google.maps.LatLng(8.987703222665113, -79.57686603069305),
    new google.maps.LatLng(8.98634149195293, -79.57553565502167),
    new google.maps.LatLng(8.985234088495204, -79.57438230514526),
    new google.maps.LatLng(8.984222056538217, -79.57348108291626),
    new google.maps.LatLng(8.98297158382934, -79.5723170042038),
    new google.maps.LatLng(8.981986038739084, -79.57152307033539),
    new google.maps.LatLng(8.980883920625757, -79.57071840763092),
    new google.maps.LatLng(8.979861279187308, -79.57006394863129),
    new google.maps.LatLng(8.97861079143597, -79.5688247680664),
    new google.maps.LatLng(8.978192194996502, -79.56818640232086),
    new google.maps.LatLng(8.977847779842211, -79.56755876541138),
    new google.maps.LatLng(8.977588143586605, -79.56701695919037),
    new google.maps.LatLng(8.977360299372414, -79.56672191619873),
    new google.maps.LatLng(8.977095364059663, -79.56650733947754),
    new google.maps.LatLng(8.97683042855338, -79.56637859344482),
    new google.maps.LatLng(8.976501908256823, -79.56630885601044),
    new google.maps.LatLng(8.974541377720467, -79.5661050081253),
    new google.maps.LatLng(8.974090984073609, -79.56602990627289),
    new google.maps.LatLng(8.973905527703572, -79.56594407558441),
    new google.maps.LatLng(8.973624693591338, -79.5658153295517),
    new google.maps.LatLng(8.973116012381766, -79.56553101539612),
    new google.maps.LatLng(8.972904061667313, -79.56541299819946),
    new google.maps.LatLng(8.9725914341375, -79.56521987915039),
    new google.maps.LatLng(8.972326495342093, -79.56502139568329),
    new google.maps.LatLng(8.972024464879365, -79.5647531747818),
    new google.maps.LatLng(8.971748928097616, -79.56448495388031),
    new google.maps.LatLng(8.971494586267248, -79.56423282623291),
    new google.maps.LatLng(8.971245543052296, -79.56403434276581),
    new google.maps.LatLng(8.970943511689955, -79.56373929977417),
    new google.maps.LatLng(8.96926908764863, -79.56239819526672),
    new google.maps.LatLng(8.967440989290688, -79.56092298030853),
    new google.maps.LatLng(8.96551750195085, -79.55935657024384),
    new google.maps.LatLng(8.964823348370494, -79.55875039100647),
    new google.maps.LatLng(8.96348802630202, -79.55767750740051),
    new google.maps.LatLng(8.96314359719433, -79.55732345581055),
    new google.maps.LatLng(8.96295283631723, -79.55702304840088),
    new google.maps.LatLng(8.9627779720919, -79.55667436122894),
    new google.maps.LatLng(8.96266669481377, -79.55637395381927),
    new google.maps.LatLng(8.96260840670209, -79.55606818199158),
    new google.maps.LatLng(8.96260840670209, -79.55571413040161),
    new google.maps.LatLng(8.962703787243596, -79.55539762973785),
    new google.maps.LatLng(8.96278856992612, -79.55516695976257),
    new google.maps.LatLng(8.963021722201072, -79.5548290014267),
    new google.maps.LatLng(8.96341914050661, -79.55448031425476),
    new google.maps.LatLng(8.963742373741155, -79.55430865287781),
    new google.maps.LatLng(8.964176883537672, -79.55424964427948),
    new google.maps.LatLng(8.964553105014769, -79.55424427986145),
    new google.maps.LatLng(8.964839245032223, -79.55426037311554),
    new google.maps.LatLng(8.965321443440464, -79.55424964427948),
    new google.maps.LatLng(8.96566057160784, -79.55429792404175),
    new google.maps.LatLng(8.966768034823673, -79.55458760261536),
    new google.maps.LatLng(8.96711775934803, -79.55448031425476),
    new google.maps.LatLng(8.967493977778423, -79.55421209335327),
    new google.maps.LatLng(8.967854299289968, -79.55390095710754),
    new google.maps.LatLng(8.96852725174363, -79.55327868461609),
    new google.maps.LatLng(8.969300880582104, -79.55253839492798),
    new google.maps.LatLng(8.970201679206925, -79.55190539360046),
    new google.maps.LatLng(8.970975304476767, -79.55148696899414),
    new google.maps.LatLng(8.971801915956505, -79.55163717269897),
    new google.maps.LatLng(8.972395379447507, -79.55193758010864),
    new google.maps.LatLng(8.972798086263662, -79.55204486846924),
    new google.maps.LatLng(8.973592901036632, -79.55195903778076),
    new google.maps.LatLng(8.974536078974927, -79.55180883407593)
];

Ruta 2

    var ruta2 = [
    new google.maps.LatLng(8.97488579601432, -79.55183029174805),
    new google.maps.LatLng(8.97575478841011, -79.55163717269897),
    new google.maps.LatLng(8.976178686384351, -79.55120801925659),
    new google.maps.LatLng(8.976369440311124, -79.55056428909302),
    new google.maps.LatLng(8.976496609539934, -79.55007076263428),
    new google.maps.LatLng(8.975055355669639, -79.54981327056885),
    new google.maps.LatLng(8.97456787144699, -79.54974889755249),
    new google.maps.LatLng(8.974165166595082, -79.5498776435852),
    new google.maps.LatLng(8.973762461296193, -79.55011367797852),
    new google.maps.LatLng(8.973274975336363, -79.55034971237183),
    new google.maps.LatLng(8.97278748872158, -79.55049991607666),
    new google.maps.LatLng(8.971091878004616, -79.55114364624023),
    new google.maps.LatLng(8.970159288733521, -79.55150842666626),
    new google.maps.LatLng(8.969417454647722, -79.55198049545288),
    new google.maps.LatLng(8.968823986287543, -79.55258131027222),
    new google.maps.LatLng(8.967509874323248, -79.55376148223877),
    new google.maps.LatLng(8.967234334114616, -79.55395460128784),
    new google.maps.LatLng(8.966895207416961, -79.55425500869751),
    new google.maps.LatLng(8.966492494052108, -79.55444812774658),
    new google.maps.LatLng(8.966132171189194, -79.5544695854187),
    new google.maps.LatLng(8.965114787058173, -79.55438375473022),
    new google.maps.LatLng(8.96458489836118, -79.55451250076294),
    new google.maps.LatLng(8.96422457360562, -79.5545768737793),
    new google.maps.LatLng(8.964076204484742, -79.55479145050049),
    new google.maps.LatLng(8.963927835303258, -79.55507040023804),
    new google.maps.LatLng(8.963758270450187, -79.55543518066406),
    new google.maps.LatLng(8.963864248492628, -79.55584287643433),
    new google.maps.LatLng(8.964055008891094, -79.5563793182373),
    new google.maps.LatLng(8.964351747089578, -79.55698013305664),
    new google.maps.LatLng(8.964627289485389, -79.55773115158081),
    new google.maps.LatLng(8.965241960230426, -79.55901861190796),
    new google.maps.LatLng(8.966238148538938, -79.55983400344849),
    new google.maps.LatLng(8.968082149473005, -79.56129312515259),
    new google.maps.LatLng(8.974440701542045, -79.55876111984253),
    new google.maps.LatLng(8.976348245435327, -79.55835342407227),
    new google.maps.LatLng(8.977831883750271, -79.55813884735107),
    new google.maps.LatLng(8.978446532131251, -79.55888986587524),
    new google.maps.LatLng(8.979294321292047, -79.5591688156128),
    new google.maps.LatLng(8.980078524501028, -79.5590615272522),
    new google.maps.LatLng(8.980650779826286, -79.55858945846558),
    new google.maps.LatLng(8.981307812604333, -79.55798864364624),
    new google.maps.LatLng(8.981986038739084, -79.55777406692505),
    new google.maps.LatLng(8.982918597602332, -79.55792427062988),
    new google.maps.LatLng(8.983596820723086, -79.55813884735107),
    new google.maps.LatLng(8.984126681653088, -79.55818176269531),
    new google.maps.LatLng(8.98493206878298, -79.55809593200684),
    new google.maps.LatLng(8.985483122103634, -79.5576024055481),
    new google.maps.LatLng(8.985864620065477, -79.55691576004028),
    new google.maps.LatLng(8.98628850621864, -79.55633640289307),
    new google.maps.LatLng(8.986818363212704, -79.55607891082764),
    new google.maps.LatLng(8.987305830962828, -79.5559287071228),
    new google.maps.LatLng(8.988895395156268, -79.55601453781128),
    new google.maps.LatLng(8.989637189392646, -79.5555853843689),
    new google.maps.LatLng(8.990209429622622, -79.55507040023804),
    new google.maps.LatLng(8.991057191264215, -79.55404043197632),
    new google.maps.LatLng(8.991184355339279, -79.55358982086182),
    new google.maps.LatLng(8.991057191264215, -79.55331087112427),
    new google.maps.LatLng(8.99099360920994, -79.55294609069824),
    new google.maps.LatLng(8.99126913136451, -79.55283880233765),
    new google.maps.LatLng(8.99173539914851, -79.55298900604248),
    new google.maps.LatLng(8.991565847296528, -79.55326795578003),
    new google.maps.LatLng(8.991629429250322, -79.55354690551758),
    new google.maps.LatLng(8.99304942330933, -79.55507040023804),
    new google.maps.LatLng(8.99340971942355, -79.55554246902466),
    new google.maps.LatLng(8.994427024163347, -79.55809593200684),
    new google.maps.LatLng(8.99538074476034, -79.55865383148193),
    new google.maps.LatLng(8.996715949374122, -79.55904006958008),
    new google.maps.LatLng(8.998644569563421, -79.55929756164551),
    new google.maps.LatLng(9.00163285086937, -79.55983400344849),
    new google.maps.LatLng(9.002353425646092, -79.56019878387451),
    new google.maps.LatLng(9.002862065800555, -79.5606279373169),
    new google.maps.LatLng(9.003179965533809, -79.56120729446411),
    new google.maps.LatLng(9.003455478409911, -79.56189393997192),
    new google.maps.LatLng(9.003561444844816, -79.56315994262695),
    new google.maps.LatLng(9.003794570892316, -79.563889503479),
    new google.maps.LatLng(9.00385815069738, -79.56470489501953),
    new google.maps.LatLng(9.004705880363112, -79.56584215164185),
    new google.maps.LatLng(9.004981392076543, -79.56637859344482),
    new google.maps.LatLng(9.005193324020915, -79.56706523895264),
    new google.maps.LatLng(9.00557480120772, -79.56760168075562),
    new google.maps.LatLng(9.005913891702521, -79.568030834198),
    new google.maps.LatLng(9.00527809676389, -79.56989765167236),
    new google.maps.LatLng(9.004875426057769, -79.57103490829468),
    new google.maps.LatLng(9.004705880363112, -79.57221508026123),
    new google.maps.LatLng(9.00542644901625, -79.5728588104248),
    new google.maps.LatLng(9.006295368128981, -79.57279443740845),
    new google.maps.LatLng(9.006846388923172, -79.57311630249023),
    new google.maps.LatLng(9.006952354364218, -79.57339525222778),
    new google.maps.LatLng(9.007227864365555, -79.57365274429321),
    new google.maps.LatLng(9.007800076774254, -79.57320213317871),
    new google.maps.LatLng(9.008308709265908, -79.57270860671997),
    new google.maps.LatLng(9.009114042580409, -79.57270860671997),
    new google.maps.LatLng(9.010004145734747, -79.57260131835938),
    new google.maps.LatLng(9.010957825252689, -79.57223653793335),
    new google.maps.LatLng(9.011233332200337, -79.57159280776978),
    new google.maps.LatLng(9.011614803011797, -79.57030534744263),
    new google.maps.LatLng(9.012526092764261, -79.56942558288574),
    new google.maps.LatLng(9.013183067671367, -79.56886768341064),
    new google.maps.LatLng(9.007143092079819, -79.57371711730957),
    new google.maps.LatLng(9.007249057433896, -79.5740818977356),
    new google.maps.LatLng(9.007121899005282, -79.57438230514526),
    new google.maps.LatLng(9.007015933613943, -79.57474708557129),
    new google.maps.LatLng(9.00688877510331, -79.57521915435791),
    new google.maps.LatLng(9.006698037253514, -79.57558393478394),
    new google.maps.LatLng(9.005892698555913, -79.57584142684937),
    new google.maps.LatLng(9.005405255841069, -79.57639932632446),
    new google.maps.LatLng(9.004981392076543, -79.57738637924194),
    new google.maps.LatLng(9.004599914263602, -79.57798719406128),
    new google.maps.LatLng(9.004197242802176, -79.57850217819214),
    new google.maps.LatLng(9.004070083300151, -79.57869529724121),
    new google.maps.LatLng(9.00385815069738, -79.58017587661743),
    new google.maps.LatLng(9.003646217970399, -79.58084106445312),
    new google.maps.LatLng(9.003349511943936, -79.58135604858398),
    new google.maps.LatLng(9.002544165787846, -79.58197832107544),
    new google.maps.LatLng(9.0020779119304, -79.58212852478027),
    new google.maps.LatLng(9.001463303654447, -79.58245038986206),
    new google.maps.LatLng(9.0007215336547, -79.58330869674683),
    new google.maps.LatLng(8.999598279045113, -79.58487510681152),
    new google.maps.LatLng(9.000000955626966, -79.58521842956543)
];

变量声明绘画点

    var lineas = new google.maps.Polyline({
    path: ruta,
    map: map,
    strokeColor: '#222000',
    strokeWeight: 4,
    strokeOpacity: 0.6,
    clickable: false
});

var lineas2 = new google.maps.Polyline({
    path: ruta2,
    map: map,
    strokeColor: '#0000ff',
    strokeWeight: 4,
    strokeOpacity: 0.6,
    clickable: false
});

<强> HTML

    <body onload="initialize()">
    Ruta: Albrook - ciudad del Saber.
       <br><br>
         <div id="map_canvas" style="width:99%; height:99%"></div>
    </body>

我希望你工作

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

2 个答案: