Javascript 谷歌地图动画符号（到达路径的目标点后停止图标）

我正在做一个学校项目，我正在使用谷歌地图API API很棒，但我需要一些代码方面的帮助。
到达目的地后，我希望图标停留在那里，不应再次重复整个路径。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 20.291, lng: 153.027},
  zoom: 6,
  mapTypeId: 'terrain'
});

// Define the symbol, using one of the predefined paths ('CIRCLE')
// supplied by the Google Maps JavaScript API.
var lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: '#393'
};

// Create the polyline and add the symbol to it via the 'icons' property.
var line = new google.maps.Polyline({
path: [{lat: -33.918861, lng: 18.423300}, {lat: -35.842160, lng: 18.863525}, {lat: -39.170387, lng: 35.189209}, {lat: -26.331494, lng: 54.228516}, {lat: 0.462885, lng: 61.083984}, {lat: 19.075984, lng: 72.877656}],
icons: [{
  icon: lineSymbol,
  offset: '100%'
}],
map: map
});

animateCircle(line);
}

// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals.
function animateCircle(line) {
var count = 0;
window.setInterval(function() {
  count = (count + 1) % 200;

  var icons = line.get('icons');
  icons[0].offset = (count / 2) + '%';
  line.set('icons', icons);
}, 20);
}

---

当图标到达行的末尾时停止动画。要停止

setInterval

，请使用

clearInterval

（）

代码片段：

//使用DOM setInterval（）函数更改符号的偏移量
//以固定的间隔。
函数animateCircle（行）{
var计数=0；
var listener=window.setInterval（函数（）{
计数=（计数+1）%200；
var icons=line.get（'icons'）；
图标[0]。偏移量=（计数/2）+'%'；
行。设置（'图标'，图标）；
如果（计数=199）clearInterval（侦听器）；
}, 20);
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
拉脱维亚：20.291，
液化天然气：153.027
},
缩放：2，
mapTypeId:'地形'
});
//使用预定义路径之一（“圆”）定义符号
//由谷歌地图JavaScript API提供。
变量lineSymbol={
路径：google.maps.SymbolPath.CIRCLE，
比例：8，
strokeColor:“#393”
};
//创建多段线并通过“icons”属性向其添加符号。
var line=新的google.maps.Polyline({
路径：[{
lat:-33.918861，
液化天然气：18.423300
}, {
纬度：-35.842160，
液化天然气：18.863525
}, {
纬度：-39.170387，
液化天然气：35.189209
}, {
lat:-26.331494，
液化天然气：54.228516
}, {
拉脱维亚：0.462885，
液化天然气：61.083984
}, {
纬度：19.075984，
液化天然气：72.877656
}],
图标：[{
图标：lineSymbol，
抵销：“100%”
}],
地图：地图
});
var bounds=new google.maps.LatLngBounds（）；
对于（var i=0；i
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}


function animateCircle(line) {
  var count = 0;
  var listener = window.setInterval(function() {
    count = (count + 1) % 200;

    var icons = line.get('icons');
    icons[0].offset = (count / 2) + '%';
    line.set('icons', icons);
    if (count == 199) clearInterval(listener);
  }, 20);
}