我正在从 GPX 文件中在 Google Maps API V3 上绘制折线。
在该折线的鼠标悬停时，我有一个动画点，沿着折线移动，使用函数 animateRoute();
但是，目前，我没有办法在鼠标悬停时删除动画点，因此，如果您将鼠标悬停、鼠标悬停、鼠标悬停等，最终会导致多个动画点沿同一条线移动。
代码片段：（请参阅下面的完整工作 URL）
var gmarkers = [];
function loadGPXFileIntoGoogleMap(map, filename,recordNum, name, hex_code) {
$.ajax({
type: "GET",
url: filename,
dataType: "xml",
success: function(xml) {
var points = [];
var bounds = new google.maps.LatLngBounds ();
$(xml).find("trkpt").each(function() {
var lat = $(this).attr("lat");
var lon = $(this).attr("lon");
if((lat != 0) && (lon != 0))
{
var p = new google.maps.LatLng(lat, lon);
points.push(p);
bounds.extend(p);
}
});
var strokeColor = "#ff0000";
var poly = new google.maps.Polyline({
path: points,
strokeColor: strokeColor,
strokeOpacity: 1,
strokeWeight: 4,
recordNum: recordNum,
});
poly.setMap(map);
google.maps.event.addListener(poly, 'mouseover', function() {
var start = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#00ff00',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var end = {
path: "M-20,0a20,20 0 1,0 40,0a20,20 0 1,0 -40,0",
fillColor: '#FF0000',
fillOpacity: 1,
strokeColor:'#000000',
strokeWeight: 4,
scale: 0.5
}
var markerStart = new google.maps.Marker({
position: poly.getPath().getAt(0),
icon: start,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerStart);
var markerEnd = new google.maps.Marker({
position: poly.getPath().getAt(poly.getPath().getLength() - 1),
icon: end,
map: map,
zIndex: 200,
scale: 1
});
gmarkers.push(markerEnd);
var icons = this.setOptions({
icons: [{
icon: {
path: google.maps.SymbolPath.CIRCLE,
strokeOpacity: 1,
strokeColor: "#000000",
strokeWeight: 2,
scale: 4
},
}]});
animateRoute(poly);
});
function animateRoute(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 200;
var icons = poly.get('icons');
icons[0].offset = (count / 2) + '%';
poly.set('icons', icons);
}, 60);
}
google.maps.event.addListener(poly, 'mouseout', function() {
removeMarkers();
});
// fit bounds to track
map.fitBounds(bounds);
}
});
}
function removeMarkers(){
for(i=0; i<gmarkers.length; i++){
gmarkers[i].setMap(null);
}
}
$(document).ready(function() {
var mapOptions = {
zoom: 17,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/blue_and_green_not_comfortable_.gpx","724","Example A","FFFF00");
loadGPXFileIntoGoogleMap(map, "cmsAdmin/uploads/taraweratrailrouterecce.gpx","431","Example B","4F4CBE");
});
完整的工作示例： https ://www.wildthings.club/mapStack.php
将鼠标悬停在蓝线上，您会看到动画点。鼠标关闭，几秒钟后再次悬停 - 将出现第二个点，第一个点仍在运行。重复，你很快就会有一堆紧张不安的点。
理想情况下，我想删除鼠标悬停时的所有动画点。
如果该折线上已经有一个，则第二个选项是不添加后续动画点图标（请注意地图上有多个折线）。
失败的第三个选项是让动画点停止并在到达终点（位置markerEnd）后移除，这样至少它不会循环。
我尝试将图标放入一个数组中，然后从那里删除（就像我对 gmarkers 数组和 removeMarkers() 所做的那样，但没有运气。
我也玩过Animate google maps polyline，但这仅适用于直线点对点，而不是遵循 GPX 文件中的一系列点。
任何帮助，非常感谢干杯