在Google地图上设置路线动画 [英] Animate route on Google Maps
本文介绍了在Google地图上设置路线动画的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找有关如何在Google Maps上设置路线动画的帮助/指针。
Im looking for help/pointers on how to animate a route on Google Maps.
我不想设置标记的动画，仅是2点之间的路线，它需要沿着地图上的道路行驶，并且最好像进度条一样工作。
I don't want to animate the markers, just the route between 2 points, it needs to follow the roads on the map and preferably would work like a progress bar.
有人知道任何示例或起点吗？
Does anyone know of any examples or a starting point
推荐答案
这是该网站的修改版本，我之前在评论中已链接到该网站。我对这段代码所做的改动很小，但是不需要Angular或jQuery。
Here's a modified version of that site I linked to in my comment earlier. I've changed very little about this code, but it doesn't require Angular or jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Animated route</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry"></script>
<script>
var map;
function initialize() {
var markLAT = coords[0].lat;
var markLNG = coords[0].lng;
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(markLAT, markLNG),
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
autoRefresh();
}
google.maps.event.addDomListener(window, 'load', initialize);
var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png");
function moveMarker(map, marker, lat, lon) {
marker.setPosition(new google.maps.LatLng(lat, lon));
map.panTo(new google.maps.LatLng(lat, lon));
}
function autoRefresh() {
var i, route, marker;
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker=new google.maps.Marker({map:map,icon:icon});
for (i = 0; i < coords.length; i++) {
setTimeout(function (coords)
{
route.getPath().push(new google.maps.LatLng(coords.lat, coords.lng));
moveMarker(map, marker, coords.lat, coords.lng);
}, 100 * i, coords[i]);
}
}
var coords = [
{
"lat": 8.893260000000001,
"lng": 76.61427
},
{
"lat": 8.894430000000002,
"lng": 76.61418
},
{
"lat": 8.89484,
"lng": 76.61416000000001
},
{
"lat": 8.894860000000001,
"lng": 76.61383000000001
},
{
"lat": 8.89488,
"lng": 76.61375000000001
},
{
"lat": 8.89563,
"lng": 76.61370000000001
},
{
"lat": 8.896270000000001,
"lng": 76.61366000000001
},
{
"lat": 8.896700000000001,
"lng": 76.61364
},
{
"lat": 8.89671,
"lng": 76.61351
},
{
"lat": 8.896740000000001,
"lng": 76.61312000000001
},
{
"lat": 8.89675,
"lng": 76.61307000000001
},
{
"lat": 8.89677,
"lng": 76.61305
},
{
"lat": 8.89729,
"lng": 76.61303000000001
},
{
"lat": 8.89755,
"lng": 76.61311
},
{
"lat": 8.898050000000001,
"lng": 76.61311
},
{
"lat": 8.898280000000002,
"lng": 76.61321000000001
},
{
"lat": 8.899180000000001,
"lng": 76.61289000000001
},
{
"lat": 8.900350000000001,
"lng": 76.61396
},
{
"lat": 8.900860000000002,
"lng": 76.61467
},
{
"lat": 8.90127,
"lng": 76.61581000000001
},
{
"lat": 8.901710000000001,
"lng": 76.61796000000001
},
{
"lat": 8.902190000000001,
"lng": 76.61932
},
{
"lat": 8.902370000000001,
"lng": 76.62017
},
{
"lat": 8.902370000000001,
"lng": 76.62088
},
{
"lat": 8.902460000000001,
"lng": 76.6212
},
{
"lat": 8.90313,
"lng": 76.62217000000001
},
{
"lat": 8.903450000000001,
"lng": 76.62240000000001
},
{
"lat": 8.903970000000001,
"lng": 76.62272
},
{
"lat": 8.90409,
"lng": 76.62280000000001
},
{
"lat": 8.904,
"lng": 76.62288000000001
},
{
"lat": 8.90342,
"lng": 76.6233
},
{
"lat": 8.902560000000001,
"lng": 76.62386000000001
},
{
"lat": 8.90033,
"lng": 76.62522000000001
},
{
"lat": 8.89601,
"lng": 76.62777000000001
},
{
"lat": 8.88676,
"lng": 76.63327000000001
},
{
"lat": 8.884450000000001,
"lng": 76.63461000000001
},
{
"lat": 8.882610000000001,
"lng": 76.63582000000001
},
{
"lat": 8.88089,
"lng": 76.63711
},
{
"lat": 8.87918,
"lng": 76.63862
},
{
"lat": 8.87785,
"lng": 76.63936000000001
},
{
"lat": 8.875760000000001,
"lng": 76.63996
},
{
"lat": 8.87273,
"lng": 76.64141000000001
},
{
"lat": 8.87067,
"lng": 76.64251
},
{
"lat": 8.869280000000002,
"lng": 76.64336
},
{
"lat": 8.86805,
"lng": 76.6447
},
{
"lat": 8.86782,
"lng": 76.6451
},
{
"lat": 8.86677,
"lng": 76.64822000000001
},
{
"lat": 8.86645,
"lng": 76.64933
},
{
"lat": 8.866200000000001,
"lng": 76.65092
},
{
"lat": 8.86546,
"lng": 76.6533
},
{
"lat": 8.86508,
"lng": 76.65451
},
{
"lat": 8.86495,
"lng": 76.65667
},
{
"lat": 8.864880000000001,
"lng": 76.65962
},
{
"lat": 8.86519,
"lng": 76.66080000000001
},
{
"lat": 8.866240000000001,
"lng": 76.66343
},
{
"lat": 8.86646,
"lng": 76.66454
},
{
"lat": 8.866200000000001,
"lng": 76.66933
},
{
"lat": 8.86569,
"lng": 76.67323
},
{
"lat": 8.86522,
"lng": 76.67823
},
{
"lat": 8.863840000000001,
"lng": 76.68872
},
{
"lat": 8.86359,
"lng": 76.6907
},
{
"lat": 8.86364,
"lng": 76.69282000000001
},
{
"lat": 8.86317,
"lng": 76.69574
},
{
"lat": 8.863420000000001,
"lng": 76.69850000000001
},
{
"lat": 8.8634,
"lng": 76.69958000000001
},
{
"lat": 8.863050000000001,
"lng": 76.70048000000001
},
{
"lat": 8.862350000000001,
"lng": 76.70149
},
{
"lat": 8.862020000000001,
"lng": 76.70239000000001
},
{
"lat": 8.86176,
"lng": 76.70448
},
{
"lat": 8.86218,
"lng": 76.70703
},
{
"lat": 8.863180000000002,
"lng": 76.70957
},
{
"lat": 8.8636,
"lng": 76.71115
},
{
"lat": 8.86382,
"lng": 76.71257
},
{
"lat": 8.86383,
"lng": 76.71368000000001
},
{
"lat": 8.86354,
"lng": 76.71509
},
{
"lat": 8.863240000000001,
"lng": 76.71595
},
{
"lat": 8.86259,
"lng": 76.71731000000001
},
{
"lat": 8.861540000000002,
"lng": 76.71883000000001
},
{
"lat": 8.85947,
"lng": 76.72208
},
{
"lat": 8.85875,
"lng": 76.72339000000001
},
{
"lat": 8.8573,
"lng": 76.72554000000001
},
{
"lat": 8.85478,
"lng": 76.72876000000001
},
{
"lat": 8.85397,
"lng": 76.72962000000001
},
{
"lat": 8.8518,
"lng": 76.73123000000001
},
{
"lat": 8.851220000000001,
"lng": 76.73173000000001
},
{
"lat": 8.850200000000001,
"lng": 76.73293000000001
},
{
"lat": 8.84966,
"lng": 76.73342000000001
},
{
"lat": 8.848920000000001,
"lng": 76.73382000000001
},
{
"lat": 8.84797,
"lng": 76.73409000000001
},
{
"lat": 8.84509,
"lng": 76.73453
},
{
"lat": 8.843850000000002,
"lng": 76.73492
},
{
"lat": 8.84294,
"lng": 76.73541
},
{
"lat": 8.841140000000001,
"lng": 76.73677
},
{
"lat": 8.84003,
"lng": 76.73747
},
{
"lat": 8.838830000000002,
"lng": 76.73848000000001
},
{
"lat": 8.836,
"lng": 76.73998
},
{
"lat": 8.835310000000002,
"lng": 76.74063000000001
},
{
"lat": 8.83496,
"lng": 76.74137
},
{
"lat": 8.834480000000001,
"lng": 76.74313000000001
},
{
"lat": 8.83385,
"lng": 76.74406
},
{
"lat": 8.832690000000001,
"lng": 76.74528000000001
},
{
"lat": 8.83188,
"lng": 76.74599
},
{
"lat": 8.830480000000001,
"lng": 76.7467
},
{
"lat": 8.82831,
"lng": 76.74775000000001
},
{
"lat": 8.82764,
"lng": 76.74836
},
{
"lat": 8.82665,
"lng": 76.7493
},
{
"lat": 8.82475,
"lng": 76.7505
},
{
"lat": 8.82245,
"lng": 76.75188
},
{
"lat": 8.82136,
"lng": 76.75254000000001
},
{
"lat": 8.819880000000001,
"lng": 76.75371000000001
},
{
"lat": 8.818140000000001,
"lng": 76.75496000000001
},
{
"lat": 8.815700000000001,
"lng": 76.75652000000001
},
{
"lat": 8.8125,
"lng": 76.75867000000001
},
{
"lat": 8.809470000000001,
"lng": 76.76091000000001
},
{
"lat": 8.806270000000001,
"lng": 76.76203000000001
},
{
"lat": 8.804110000000001,
"lng": 76.763
},
{
"lat": 8.803410000000001,
"lng": 76.76368000000001
},
{
"lat": 8.802990000000001,
"lng": 76.76439
},
{
"lat": 8.8024,
"lng": 76.76629000000001
},
{
"lat": 8.80207,
"lng": 76.76687000000001
},
{
"lat": 8.801540000000001,
"lng": 76.76747
},
{
"lat": 8.79983,
"lng": 76.76870000000001
},
{
"lat": 8.799180000000002,
"lng": 76.76894
},
{
"lat": 8.798390000000001,
"lng": 76.76903
},
{
"lat": 8.79742,
"lng": 76.76905000000001
},
{
"lat": 8.795710000000001,
"lng": 76.76929000000001
},
{
"lat": 8.79439,
"lng": 76.76955000000001
},
{
"lat": 8.79053,
"lng": 76.77083
},
{
"lat": 8.78954,
"lng": 76.77144000000001
},
{
"lat": 8.788820000000001,
"lng": 76.77241000000001
},
{
"lat": 8.78842,
"lng": 76.77367000000001
},
{
"lat": 8.78814,
"lng": 76.77574000000001
},
{
"lat": 8.78767,
"lng": 76.77690000000001
},
{
"lat": 8.78735,
"lng": 76.77735000000001
},
{
"lat": 8.78688,
"lng": 76.77771000000001
},
{
"lat": 8.78307,
"lng": 76.78025000000001
},
{
"lat": 8.779250000000001,
"lng": 76.78346
},
{
"lat": 8.77712,
"lng": 76.78488
},
{
"lat": 8.77275,
"lng": 76.78745
},
{
"lat": 8.770980000000002,
"lng": 76.78802
},
{
"lat": 8.76699,
"lng": 76.78881000000001
},
{
"lat": 8.765640000000001,
"lng": 76.78967
},
{
"lat": 8.76401,
"lng": 76.79095000000001
},
{
"lat": 8.763190000000002,
"lng": 76.79128
},
{
"lat": 8.76102,
"lng": 76.79195
},
{
"lat": 8.7558,
"lng": 76.79388
},
{
"lat": 8.75234,
"lng": 76.79589
},
{
"lat": 8.750900000000001,
"lng": 76.79650000000001
},
{
"lat": 8.75009,
"lng": 76.79726000000001
},
{
"lat": 8.748840000000001,
"lng": 76.79895
},
{
"lat": 8.747110000000001,
"lng": 76.80017000000001
},
{
"lat": 8.74582,
"lng": 76.80142000000001
},
{
"lat": 8.74407,
"lng": 76.80305000000001
},
{
"lat": 8.74125,
"lng": 76.80436
},
{
"lat": 8.73728,
"lng": 76.80730000000001
},
{
"lat": 8.73624,
"lng": 76.80879
},
{
"lat": 8.73544,
"lng": 76.80953000000001
},
{
"lat": 8.732800000000001,
"lng": 76.8109
},
{
"lat": 8.731950000000001,
"lng": 76.8113
},
{
"lat": 8.730500000000001,
"lng": 76.81166
},
{
"lat": 8.72644,
"lng": 76.81249000000001
},
{
"lat": 8.723980000000001,
"lng": 76.81252
},
{
"lat": 8.72197,
"lng": 76.81271000000001
},
{
"lat": 8.720460000000001,
"lng": 76.81268
},
{
"lat": 8.71958,
"lng": 76.81273
},
{
"lat": 8.71719,
"lng": 76.81297
},
{
"lat": 8.71636,
"lng": 76.81293000000001
},
{
"lat": 8.714080000000001,
"lng": 76.81215
},
{
"lat": 8.713080000000001,
"lng": 76.81175
},
{
"lat": 8.71254,
"lng": 76.8117
},
{
"lat": 8.71188,
"lng": 76.81176
},
{
"lat": 8.71118,
"lng": 76.81200000000001
},
{
"lat": 8.70936,
"lng": 76.81330000000001
},
{
"lat": 8.70716,
"lng": 76.81486000000001
},
{
"lat": 8.70616,
"lng": 76.81506
},
{
"lat": 8.70514,
"lng": 76.81497
},
{
"lat": 8.70363,
"lng": 76.81461
},
{
"lat": 8.70148,
"lng": 76.81371
},
{
"lat": 8.70063,
"lng": 76.81357000000001
},
{
"lat": 8.70003,
"lng": 76.81360000000001
},
{
"lat": 8.698400000000001,
"lng": 76.81366000000001
},
{
"lat": 8.698210000000001,
"lng": 76.81378000000001
},
{
"lat": 8.69705,
"lng": 76.81499000000001
},
{
"lat": 8.696520000000001,
"lng": 76.81584000000001
},
{
"lat": 8.69635,
"lng": 76.81654
},
{
"lat": 8.695580000000001,
"lng": 76.8182
},
{
"lat": 8.69529,
"lng": 76.81865
},
{
"lat": 8.694780000000002,
"lng": 76.81908
},
{
"lat": 8.69355,
"lng": 76.81999
},
{
"lat": 8.6928,
"lng": 76.82099000000001
},
{
"lat": 8.691880000000001,
"lng": 76.82178
},
{
"lat": 8.690430000000001,
"lng": 76.82248000000001
},
{
"lat": 8.68914,
"lng": 76.82319000000001
},
{
"lat": 8.68819,
"lng": 76.82406
},
{
"lat": 8.68773,
"lng": 76.82423
},
{
"lat": 8.68612,
"lng": 76.82438
},
{
"lat": 8.68462,
"lng": 76.82435000000001
},
{
"lat": 8.68229,
"lng": 76.82445000000001
},
{
"lat": 8.68044,
"lng": 76.82475000000001
},
{
"lat": 8.67947,
"lng": 76.8251
},
{
"lat": 8.678650000000001,
"lng": 76.82560000000001
},
{
"lat": 8.678180000000001,
"lng": 76.82599
},
{
"lat": 8.67652,
"lng": 76.82787
},
{
"lat": 8.67533,
"lng": 76.82933000000001
},
{
"lat": 8.67463,
"lng": 76.83056
},
{
"lat": 8.6738,
"lng": 76.83302
},
{
"lat": 8.67337,
"lng": 76.83368
},
{
"lat": 8.67276,
"lng": 76.83424000000001
},
{
"lat": 8.67102,
"lng": 76.83500000000001
},
{
"lat": 8.669350000000001,
"lng": 76.83574
},
{
"lat": 8.6684,
"lng": 76.83630000000001
},
{
"lat": 8.665890000000001,
"lng": 76.83818000000001
},
{
"lat": 8.66487,
"lng": 76.83893
},
{
"lat": 8.66254,
"lng": 76.83997000000001
},
{
"lat": 8.66042,
"lng": 76.8408
},
{
"lat": 8.65906,
"lng": 76.84094
},
{
"lat": 8.65737,
"lng": 76.84088000000001
},
{
"lat": 8.655100000000001,
"lng": 76.84037000000001
},
{
"lat": 8.654060000000001,
"lng": 76.84041
},
{
"lat": 8.65291,
"lng": 76.84082000000001
},
{
"lat": 8.65094,
"lng": 76.84149000000001
},
{
"lat": 8.647400000000001,
"lng": 76.84214
},
{
"lat": 8.64208,
"lng": 76.84372
},
{
"lat": 8.63718,
"lng": 76.84567000000001
},
{
"lat": 8.633890000000001,
"lng": 76.84642000000001
},
{
"lat": 8.63049,
"lng": 76.84713
},
{
"lat": 8.62597,
"lng": 76.84825000000001
},
{
"lat": 8.62233,
"lng": 76.84888000000001
},
{
"lat": 8.61796,
"lng": 76.85015
},
{
"lat": 8.61705,
"lng": 76.85052
},
{
"lat": 8.611970000000001,
"lng": 76.85444000000001
},
{
"lat": 8.609100000000002,
"lng": 76.85662
},
{
"lat": 8.60847,
"lng": 76.85691000000001
},
{
"lat": 8.60748,
"lng": 76.85704000000001
},
{
"lat": 8.604790000000001,
"lng": 76.85632000000001
},
{
"lat": 8.60331,
"lng": 76.85583000000001
},
{
"lat": 8.601980000000001,
"lng": 76.85521
},
{
"lat": 8.60084,
"lng": 76.85462000000001
},
{
"lat": 8.599530000000001,
"lng": 76.85423
},
{
"lat": 8.598180000000001,
"lng": 76.85446
},
{
"lat": 8.59272,
"lng": 76.85616
},
{
"lat": 8.58853,
"lng": 76.85780000000001
},
{
"lat": 8.587850000000001,
"lng": 76.85819000000001
},
{
"lat": 8.58651,
"lng": 76.85957
},
{
"lat": 8.58371,
"lng": 76.86185
},
{
"lat": 8.58211,
"lng": 76.86330000000001
},
{
"lat": 8.57942,
"lng": 76.86524
},
{
"lat": 8.57592,
"lng": 76.86807
},
{
"lat": 8.57488,
"lng": 76.86879
},
{
"lat": 8.573540000000001,
"lng": 76.86953000000001
},
{
"lat": 8.57169,
"lng": 76.87060000000001
},
{
"lat": 8.56986,
"lng": 76.87212000000001
},
{
"lat": 8.56779,
"lng": 76.87364000000001
},
{
"lat": 8.56587,
"lng": 76.87492
},
{
"lat": 8.56545,
"lng": 76.8755
},
{
"lat": 8.565230000000001,
"lng": 76.87642000000001
},
{
"lat": 8.56508,
"lng": 76.87809
},
{
"lat": 8.5647,
"lng": 76.88276
},
{
"lat": 8.56473,
"lng": 76.88329
},
{
"lat": 8.56521,
"lng": 76.88474000000001
},
{
"lat": 8.56591,
"lng": 76.88702
},
{
"lat": 8.566840000000001,
"lng": 76.88966
},
{
"lat": 8.566930000000001,
"lng": 76.89045
},
{
"lat": 8.56609,
"lng": 76.89177000000001
},
{
"lat": 8.564670000000001,
"lng": 76.89337
},
{
"lat": 8.56283,
"lng": 76.89437000000001
},
{
"lat": 8.56193,
"lng": 76.89489
},
{
"lat": 8.5616,
"lng": 76.89528
},
{
"lat": 8.561290000000001,
"lng": 76.89592
},
{
"lat": 8.560770000000002,
"lng": 76.89757
},
{
"lat": 8.5608,
"lng": 76.89906
},
{
"lat": 8.56107,
"lng": 76.90019000000001
},
{
"lat": 8.560960000000001,
"lng": 76.90051000000001
},
{
"lat": 8.560640000000001,
"lng": 76.90077000000001
},
{
"lat": 8.560080000000001,
"lng": 76.90137
},
{
"lat": 8.559880000000001,
"lng": 76.90159000000001
},
{
"lat": 8.55888,
"lng": 76.90188
},
{
"lat": 8.557310000000001,
"lng": 76.90271000000001
},
{
"lat": 8.55607,
"lng": 76.90337000000001
},
{
"lat": 8.55532,
"lng": 76.90364000000001
},
{
"lat": 8.554450000000001,
"lng": 76.90429
},
{
"lat": 8.55367,
"lng": 76.90523
},
{
"lat": 8.552750000000001,
"lng": 76.90672
},
{
"lat": 8.55192,
"lng": 76.90914000000001
},
{
"lat": 8.551060000000001,
"lng": 76.91055
},
{
"lat": 8.55096,
"lng": 76.91157000000001
},
{
"lat": 8.55077,
"lng": 76.91293
},
{
"lat": 8.549750000000001,
"lng": 76.91429000000001
},
{
"lat": 8.54897,
"lng": 76.91604000000001
},
{
"lat": 8.54884,
"lng": 76.91713
},
{
"lat": 8.54833,
"lng": 76.91862
},
{
"lat": 8.548340000000001,
"lng": 76.91954000000001
},
{
"lat": 8.548340000000001,
"lng": 76.92013
},
{
"lat": 8.548150000000001,
"lng": 76.92067
},
{
"lat": 8.54765,
"lng": 76.92168000000001
},
{
"lat": 8.547320000000001,
"lng": 76.92183
},
{
"lat": 8.546460000000002,
"lng": 76.92172000000001
},
{
"lat": 8.54588,
"lng": 76.92167
},
{
"lat": 8.545010000000001,
"lng": 76.92194
},
{
"lat": 8.54223,
"lng": 76.92337
},
{
"lat": 8.54024,
"lng": 76.92455000000001
},
{
"lat": 8.539470000000001,
"lng": 76.92527000000001
},
{
"lat": 8.53843,
"lng": 76.92589000000001
},
{
"lat": 8.536340000000001,
"lng": 76.92666000000001
},
{
"lat": 8.535070000000001,
"lng": 76.92738
}
];
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
这篇关于在Google地图上设置路线动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
