在多个测地多义线上动画符号 [英] Animate symbol on multiple geodesic polylines

问题描述

我想通过多个测地多义线来动画符号......我厌倦了在for循环中执行此操作。线被绘制，但圆（符号）没有动画..它只是停留在起始点这里是我的代码。

I want to animate symbols though multiple geodesic polylines...i tired to do this in a for loop. the lines get drawn but the circle (symbol) does not animate..it just stays at the starting point here is my code.

    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);
    }

请帮助我解决这个问题..我很想看到这个工作： ）非常感谢。

please help me on this one..i would love to see this work :) thank you very much.

推荐答案

您的折线变量超出了animateCircle函数的范围。你必须使用闭包，从animateCircle函数中获取代码，并粘贴它来代替它的调用。应该这样做。

Your polyline variable is out of animateCircle function's scope. You have to use closure, getting code out of animateCircle function and pasting it in place of its call should do the trick.

编辑：I像往常一样搞砸了;-)
你可以这样做（再次，未经测试）：

I messed up closure as usual ;-) You can do it like that (again, untested):

//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);
}

这篇关于在多个测地多义线上动画符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！