syg*_*ad1 1 routes animated google-maps-api-3
我正在寻找有关如何在 Google 地图上为路线设置动画的帮助/指示。
我不想为标记设置动画，只想为两点之间的路线设置动画，它需要遵循地图上的道路，最好像进度条一样工作。
有谁知道任何例子或起点
这是我之前在评论中链接到的那个网站的修改版本。我对这段代码几乎没有改动，但它不需要 Angular 或 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
},
{