这些是我的基本功能：
function autoRefresh(map) {
var i;
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker1=new google.maps.Marker({map:map,icon:'http://maps.google.com/mapfiles/ms/micons/blue.png'});
for (i = 0; i < pathCoords.length; i++) {
setTimeout(function (coords)
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
route.getPath().push(latlng);
moveMarker(map, marker1, latlng);
}, 300 * i, pathCoords[i]);
}
}
function stop() {
route.setMap(null);
marker1.setMap(null);
marker1 = [];
}
autoRefresh（）是我开始标记移动的函数，stop（）是停止移动。它完美无缺，直到我第一次点击开始和停止按钮。单击停止按钮（在标记完成其路径之前）单击开始按钮后，我希望标记从起始位置开始作为新标记，但它会奇怪地移动，连接它所在的最后位置并绘制曲折线。请帮帮我，提前感谢你。
代码段
var marker1, map, route;
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: pathCoords[0].lat,
lng: pathCoords[0].lng
},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(8.893260000000001, 76.61427),
map: map
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(8.52426, 76.93668000000001),
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
});
//autoRefresh(map);
}
function moveMarker(map, marker1, latlng) {
marker1.setPosition(latlng);
map.panTo(latlng);
}
function autoRefresh(map) {
var i;
route = new google.maps.Polyline({
path: [],
geodesic: true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map: map
});
marker1 = new google.maps.Marker({
map: map,
icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
});
for (i = 0; i < pathCoords.length; i++) {
setTimeout(function(coords) {
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
route.getPath().push(latlng);
moveMarker(map, marker1, latlng);
}, 300 * i, pathCoords[i]);
}
}
function stop() {
route.setMap(null);
marker1.setMap(null);
marker1 = [];
}
var pathCoords = [{
"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
},
{
"lat": 8.5333,
"lng": 76.92876000000001
},
{
"lat": 8.53275,
"lng": 76.92896
},
{
"lat": 8.5325,
"lng": 76.92898000000001
},
{
"lat": 8.530420000000001,
"lng": 76.92887
},
{
"lat": 8.530040000000001,
"lng": 76.92898000000001
},
{
"lat": 8.52973,
"lng": 76.92966000000001
},
{
"lat": 8.529630000000001,
"lng": 76.93037000000001
},
{
"lat": 8.52961,
"lng": 76.93189000000001
},
{
"lat": 8.52964,
"lng": 76.93216000000001
},
{
"lat": 8.529430000000001,
"lng": 76.93264
},
{
"lat": 8.52898,
"lng": 76.93319000000001
},
{
"lat": 8.5289,
"lng": 76.93355000000001
},
{
"lat": 8.528920000000001,
"lng": 76.93416
},
{
"lat": 8.52889,
"lng": 76.93433
},
{
"lat": 8.528680000000001,
"lng": 76.93433
},
{
"lat": 8.52801,
"lng": 76.93436000000001
},
{
"lat": 8.527470000000001,
"lng": 76.93437
},
{
"lat": 8.52581,
"lng": 76.93447
},
{
"lat": 8.52491,
"lng": 76.93469
},
{
"lat": 8.52449,
"lng": 76.93471000000001
},
{
"lat": 8.524170000000002,
"lng": 76.93523
},
{
"lat": 8.52411,
"lng": 76.93534000000001
},
{
"lat": 8.52424,
"lng": 76.93537
},
{
"lat": 8.5244,
"lng": 76.93548000000001
},
{
"lat": 8.524370000000001,
"lng": 76.9364
},
{
"lat": 8.52426,
"lng": 76.93668000000001
}];
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
height: 100%;
width: 100%;
}<script src="https://maps.google.com/maps/api/js"></script>
<br>
<br>
<input onclick="autoRefresh(map);" type=button value="Start">
<input onclick="stop();" type=button value="Stop">
<br>
<br>
<div id="map"></div>
答案 0 :(得分：2)
您需要保留对您创建的所有计时器的引用并取消所有计时器。
var timers = [];
function autoRefresh(map) {
var i;
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker1=new google.maps.Marker({map:map,icon:'http://maps.google.com/mapfiles/ms/micons/blue.png'});
for (i = 0; i < pathCoords.length; i++) {
var timerhandle = setTimeout(function (coords)
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
route.getPath().push(latlng);
moveMarker(map, marker1, latlng);
}, 300 * i, pathCoords[i]);
timers.push(timerhandle);
}
}
function stop() {
for (var i=0; i< timers.length; i++) {
clearTimeout(timers[i]);
}
route.setMap(null);
marker1.setMap(null);
marker1 = [];
}
代码段
var marker1, map, route, timerhandle;
var timers = [];
function initialize() {
map = new google.maps.Map(document.getElementById("map"), {
center: {lat: pathCoords[0].lat, lng: pathCoords[0].lng},
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({position:new google.maps.LatLng(24.94676383440351, 67.13702201843262),
map:map});
var marker = new google.maps.Marker({position:new google.maps.LatLng(24.94276562875255, 67.18474388122559), map:map,
icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
});
//autoRefresh(map);
}
function moveMarker(map, marker1, latlng) {
marker1.setPosition(latlng);
map.panTo(latlng);
}
function autoRefresh(map) {
var i;
route = new google.maps.Polyline({
path: [],
geodesic : true,
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 2,
editable: false,
map:map
});
marker1=new google.maps.Marker({map:map,icon:'http://maps.google.com/mapfiles/ms/micons/blue.png'});
for (i = 0; i < pathCoords.length; i++) {
var timerhandle = setTimeout(function (coords)
{
var latlng = new google.maps.LatLng(coords.lat, coords.lng);
route.getPath().push(latlng);
moveMarker(map, marker1, latlng);
}, 300 * i, pathCoords[i]);
timers.push(timerhandle);
}
}
function stop() {
for (var i=0; i< timers.length; i++) {
clearTimeout(timers[i]);
}
route.setMap(null);
marker1.setMap(null);
marker1 = [];
}
var pathCoords = [
{
"lat": 24.94676383440351,
"lng": 67.13702201843262
},
{
"lat": 24.945829958568236,
"lng": 67.13824510574341
},
{
"lat": 24.94567431190732,
"lng": 67.13839530944824
},
{
"lat": 24.946121795527365,
"lng": 67.13893175125122
},
{
"lat": 24.946744378729154,
"lng": 67.13951110839844
},
{
"lat": 24.947308592037547,
"lng": 67.14011192321777
},
{
"lat": 24.94783389175996,
"lng": 67.1405839920044
},
{
"lat": 24.948417555490515,
"lng": 67.14116334915161
},
{
"lat": 24.94902067177291,
"lng": 67.14184999465942
},
{
"lat": 24.949740516372685,
"lng": 67.14257955551147
},
{
"lat": 24.94909849301358,
"lng": 67.14345932006836
},
{
"lat": 24.948631564832016,
"lng": 67.14403867721558
},
{
"lat": 24.948106268511754,
"lng": 67.14472532272339
},
{
"lat": 24.94752260330603,
"lng": 67.14545488357544
},
{
"lat": 24.946783290074784,
"lng": 67.14635610580444
},
{
"lat": 24.945907781824943,
"lng": 67.14740753173828
},
{
"lat": 24.944993355453292,
"lng": 67.14860916137695
},
{
"lat": 24.943709255897694,
"lng": 67.15015411376953
},
{
"lat": 24.941763625005482,
"lng": 67.15279340744019
},
{
"lat": 24.940401665098086,
"lng": 67.15451002120972
},
{
"lat": 24.939309654225738,
"lng": 67.15601205825806
},
{
"lat": 24.939275604733375,
"lng": 67.15608447790146
},
{
"lat": 24.939239123123972,
"lng": 67.1561998128891
},
{
"lat": 24.939275604733375,
"lng": 67.15641438961029
},
{
"lat": 24.939331543180167,
"lng": 67.15677112340927
},
{
"lat": 24.939565025118608,
"lng": 67.157261967659
},
{
"lat": 24.94012927130989,
"lng": 67.15838849544525
},
{
"lat": 24.940328702535293,
"lng": 67.15898394584656
},
{
"lat": 24.940338430879503,
"lng": 67.15927362442017
},
{
"lat": 24.940260604104388,
"lng": 67.16037333011627
},
{
"lat": 24.940231419051027,
"lng": 67.1607381105423
},
{
"lat": 24.940343295051314,
"lng": 67.16156959533691
},
{
"lat": 24.94059623172093,
"lng": 67.16286242008209
},
{
"lat": 24.940868624476717,
"lng": 67.164106965065
},
{
"lat": 24.941213978712003,
"lng": 67.16572701931
},
{
"lat": 24.94161283732836,
"lng": 67.16765820980072
},
{
"lat": 24.9421478895418,
"lng": 67.17001855373383
},
{
"lat": 24.942318132940574,
"lng": 67.17079639434814
},
{
"lat": 24.942770492828537,
"lng": 67.17302799224854
},
{
"lat": 24.943203394821786,
"lng": 67.17518985271454
},
{
"lat": 24.94359251891071,
"lng": 67.17712104320526
},
{
"lat": 24.943864905041604,
"lng": 67.17803835868835
},
{
"lat": 24.944969035510336,
"lng": 67.17934727668762
},
{
"lat": 24.94623853011741,
"lng": 67.18083322048187
},
{
"lat": 24.946885432298547,
"lng": 67.1815949678421
},
{
"lat": 24.94726481695956,
"lng": 67.1820455789566
},
{
"lat": 24.94776336553854,
"lng": 67.18263298273087
},
{
"lat": 24.94821813736032,
"lng": 67.1832150220871
},
{
"lat": 24.949594602266778,
"lng": 67.18494772911072
},
{
"lat": 24.950115028453187,
"lng": 67.18566656112671
},
{
"lat": 24.949983706165003,
"lng": 67.18631565570831
},
{
"lat": 24.949993433746716,
"lng": 67.18661069869995
},
{
"lat": 24.95001775269762,
"lng": 67.18688428401947
},
{
"lat": 24.94977942677173,
"lng": 67.18697547912598
},
{
"lat": 24.949623785101817,
"lng": 67.18683063983917
},
{
"lat": 24.94943896036326,
"lng": 67.18671262264252
},
{
"lat": 24.94925413534736,
"lng": 67.18659996986389
},
{
"lat": 24.94814517942712,
"lng": 67.18636393547058
},
{
"lat": 24.946627644618534,
"lng": 67.18611717224121
},
{
"lat": 24.94444858757967,
"lng": 67.18583822250366
},
{
"lat": 24.942609978219703,
"lng": 67.18559145927429
},
{
"lat": 24.94276562875255,
"lng": 67.18474388122559
}
];
google.maps.event.addDomListener(window, 'load', initialize);html,
body,
#map {
height: 100%;
width: 100%;
}<script src="https://maps.google.com/maps/api/js"></script>
<br>
<br>
<input onclick="autoRefresh(map);" type=button value="Start">
<input onclick="stop();" type=button value="Stop">
<br>
<br>
<div id="map"></div>