這個問題在這里已經有了答案： google-maps 影片符號（到達路徑的目的地點后停止圖示） 1 個回答 7 天前關閉。
我正在使用來自google-maps-docs 的基本影片示例。
function initMap(): void {
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
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.
const lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: "#393",
};
// Create the polyline and add the symbol to it via the 'icons' property.
const line = new google.maps.Polyline({
path: [
{ lat: 22.291, lng: 153.027 },
{ lat: 18.291, lng: 153.027 },
],
icons: [
{
icon: lineSymbol,
offset: "100%",
},
],
map: map,
});
animateCircle(line);
}
function animateCircle(line: google.maps.Polyline) {
let count = 0;
const icons = line.get("icons");
window.setInterval(() => {
count = (count 1) % 200;
icons[0].offset = count / 2 "%";
line.set("icons", icons);
}, 60);
}
如何在2nd point折線處停止影片last point并在該點顯示標記？正如您在檔案中看到的那樣，由于間隔，影片肯定會再次重復，但我想添加clearInterval我的圖示偏移量為last point
我試過以下：
const stopAni = ref<number | undefined>();
function animateCircle(line: google.maps.Polyline) {
let count = 0;
const icons = line.get("icons");
stopAni.value = window.setInterval(() => { // setting interval to variable
count = (count 1) % 200;
icons[0].offset = count / 2 "%";
line.set("icons", icons);
}, 60);
// I want to clearInterval at last point but i don't know where to add that?
//clearInterval(stopAni.value)
}
uj5u.com熱心網友回復：
當計數等于最大值 (199) 時clearInterval呼叫：intervalID
if (count >= 199)
window.clearTimeout(intervalHandler);
影片一次的完整功能：
function animateCircle(line) {
let count = 0;
let intervalHandler = window.setInterval(() => {
count = (count 1) % 200;
const icons = line.get("icons");
icons[0].offset = count / 2 "%";
console.log("count=" count " offset=" icons[0].offset);
line.set("icons", icons);
if (count >= 199)
window.clearTimeout(intervalHandler);
}, 20);
概念證明小提琴
代碼片段：
// This example adds an animated symbol to a polyline.
function initMap() {
const 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.
const lineSymbol = {
path: google.maps.SymbolPath.CIRCLE,
scale: 8,
strokeColor: "#393",
};
// Create the polyline and add the symbol to it via the 'icons' property.
const line = new google.maps.Polyline({
path: [{
lat: 22.291,
lng: 153.027
},
{
lat: 18.291,
lng: 153.027
},
],
icons: [{
icon: lineSymbol,
offset: "100%",
}, ],
map: map,
});
animateCircle(line);
}
// Use the DOM setInterval() function to change the offset of the symbol
// at fixed intervals, stop at the end.
function animateCircle(line) {
let count = 0;
let intervalHandler = window.setInterval(() => {
count = (count 1) % 200;
const icons = line.get("icons");
icons[0].offset = count / 2 "%";
line.set("icons", icons);
if (count >= 199)
window.clearTimeout(intervalHandler);
}, 20);
}
window.initMap = initMap;#map {
height: 100%;
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<title>Animating Symbols</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=weekly" defer></script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/519349.html
上一篇：java.lang.NullPointerException：嘗試在空物件參考上呼叫虛擬方法“voidcom.google.android.gms.maps.GoogleMap.clear()”