根据 lou 的回答，这是我刚刚为 Marker animation example 所做的修复：
<head>
<meta charset="UTF-8">
<title>Marker Animation</title>
<link rel="stylesheet" href="https://openlayers.org/en/v5.3.0/css/ol.css" type="text/css">
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<label for="speed">
speed:
<input id="speed" type="range" min="10" max="999" step="10" value="60">
</label>
<button id="start-animation">Start Animation</button>
<script>
var Feature = ol.Feature; //import Feature from 'ol/Feature.js';
//var Map = ol.Map; //import Map from 'ol/Map.js'; //commented-out, use ol.Map in code instead of Map, internal JS Map object causes conflicts in newer browsers
var View = ol.View; //import View from 'ol/View.js';
var Polyline = ol.format.Polyline; //import Polyline from 'ol/format/Polyline.js';
var Point = ol.geom.Point; //import Point from 'ol/geom/Point.js';
var {Tile, Vector} = ol.layer; //import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
var TileLayer = Tile;
var VectorLayer = Vector;
//var BingMaps = ol.source.BingMaps; //import BingMaps from 'ol/source/BingMaps.js';
var VectorSource = ol.source.Vector; //import VectorSource from 'ol/source/Vector.js';
var {Circle, Fill, Icon, Stroke, Style} = ol.style; //import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';
var CircleStyle = Circle;
// This long string is placed here due to jsFiddle limitations.
// It is usually loaded with AJAX.
var polyline = [ ...
如果要使用 ESRI sattelite map 或 OpenStreetMap（普通）地图而不是 Bing Maps 地图（需要密钥），请对标记动画示例进行此额外编辑：
var map = new ol.Map({ //don't do new Map(...) here, uses some internal JS Map object in newer browsers
target: document.getElementById('map'),
loadTilesWhileAnimating: true,
view: new View({
center: center,
zoom: 10,
minZoom: 2,
maxZoom: 19
}),
layers: [
new TileLayer({
source:
//new ol.source.OSM()
new ol.source.XYZ({
attributions: ['Powered by Esri',
'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
attributionsCollapsible: false,
url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
maxZoom: 23
})
/*
new BingMaps({
imagerySet: 'AerialWithLabels',
key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
})
*/
}),
vectorLayer
]
});