logo标签列表

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

google-mapsgoogle-maps-api-3
7

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

基本上，我有一个包含100多个纬度和经度坐标点的列表，我想使用它来展示某人使用Google Maps中的方向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();

仅指定起点和终点坐标的问题在于，根据Google Maps显示的路线是最短路线，不一定是实际旅途中经过的路线。例如，人们可能会走小路，沿途绕道到其他地方等。
我研究了API中的Waypoints部分（https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints），但显然仅限于10个点，这并不能真正解决问题...
有没有其他方法可以传递多个坐标，以便在地图上绘制出路径呢？我试图展示一个人走过的路径（类似于您在Strava等应用程序上看到的路径）。
一个选择可能是道路API，但是虽然它听起来可以做到你想要的，但1.我不确定它已经准备好面世了（请参见问题列表，有时无法选择正确的道路），2.它的查询大小有100点的限制和配额，以及3.输入点之间的最小距离为400米。 - geocodezip
2个回答
3
这里有一个快速的例子，如何克服10个航点的限制。我已经测试了15个航点，但没有放置任何错误捕获。
如果您在这里搜索“多个航点”，您将得到许多示例，因此您可以选择最适合您任务的内容。
享受吧，Reinhard 

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

2
我给你留下一个例子，其中有两条路线，都从同一起点到达同一目的地，这是两条不同的路线。 用Windows Mobile 应用程序捕获点时，精度不太准确，但它们可以标示出路线。以下是一个包含超过10个路线点的示例。
我在这里留下我们发布页面的链接：Ruta 在这里，声明变量以存储地图数据：
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，包含两个坐标点，这样更容易

    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>

I hope you work

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接