在多条测地线折线上为符号添加动画效果

Animate symbol on multiple geodesic polylines

本文关键字：符号添加动画折线更新时间：2023-09-26

我想通过多条测地线折线对符号进行动画处理......我厌倦了在 for 循环中这样做。线条被绘制，但圆圈（符号）没有动画。它只是停留在起点，这是我的代码。

    var poly;
    var geodesic;
    var map;
    var clickcount = 0;
    function initialize() {

        var styles = [{ featureType: "landscape", stylers: [{ color: "#000514"}] }, { featureType: "administrative.country", stylers: [{ weight: 0.1 }, { color: "#009acd"}] }, { featureType: "water", stylers: [{ color: "#1f4fa5dc"}] }, { featureType: "road", stylers: [{ color: "#000514"}] }, { featureType: "administrative.locality", stylers: [{ color: "#7cfc00" }, { visibility: "off"}] }, { featureType: "landscape.man_made", stylers: [{ visibility: "off"}] }, { featureType: "poi", stylers: [{ visibility: "off"}] }, { featureType: "administrative.province", stylers: [{ visibility: "on"}]}];
        var mapOptions = {
            center: new google.maps.LatLng(7.3, 80.6333),
            zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        map.setOptions({ styles: styles });
        var lineSymbol = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2,
            strokeColor: '#FF0000'
        };

        var i;
        for (i = 0; i < 50; i = i + 5) {

            var flightPlanCoordinates = [
            new google.maps.LatLng(7.3, 80.6333),
            new google.maps.LatLng(23.772323 + i, -102.214897 - i)];
            var polyline = new google.maps.Polyline({
                path: flightPlanCoordinates,
                icons: [{ icon: lineSymbol, offset: '100%'}],
                strokeColor: "#FF0000",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true                  
            });
            polyline.setMap(map);
            animateCircle();
        }
    }
    function animateCircle() {
        var count = 0;
        offsetId = window.setInterval(function () {
            count = (count + 1) % 200;
            var icons = polyline.get('icons');
            icons[0].offset = (count / 2) + '%';
            polyline.set('icons', icons);
        }, 20);
    }

请帮我这个..我很想看到这项工作:)谢谢。

您的折线变量超出了 animateCircle 函数的范围。您必须使用闭包，从animateCircle函数中获取代码并将其粘贴到其调用的位置应该可以解决问题。

编辑：我像往常一样搞砸了关闭;-）你可以这样做（同样，未经测试）：

//vars
var poliylines = new Array();
function initialize() {
    //unchanged code
    var i;
    for (i = 0; i < 50; i = i + 5) {
        //unchanged code
        polylines[i] = polyline;
        animateCircle(i);
    }
}
function animateCircle(var id) {
    var count = 0;
    offsetId = window.setInterval(function () {
        count = (count + 1) % 200;
        var icons = polylines[id].get('icons');
        icons[0].offset = (count / 2) + '%';
        polylines[id].set('icons', icons);
    }, 20);
}

找到了这个问题的简单答案。我正在使用谷歌地图 api v3。https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

向下滚动，然后单击html + javascript选项卡，我们有可变的行坐标。在这里，我们可以传递一组对象，而不是像这样传递 2 个对象：

var lineCoordinates = [
new google.maps.LatLng(latitude1, longitude1),
new google.maps.LatLng(latitude2, longitude2),
new google.maps.LatLng(latitude3, longitude3),
new google.maps.LatLng(latitude4, longitude4)
];

动画现在将发生在行坐标中的所有对象上。在本例中，有 4 条折线。