1

我想通过多条测地线多段线为符号设置动画……我厌倦了在 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);
    }

请帮我解决这个问题..我很想看到这项工作:) 非常感谢。

4

2 回答 2

3

您的折线变量超出了 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);
}
于 2012-08-13T09:37:50.550 回答
0

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

向下滚动并单击html+javascript 选项卡，我们有变量lineCoordinates。在这里，我们可以传递一组对象而不是像这样的 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)
];

动画现在将在 lineCoordinates 中的所有对象上发生。在这个例子中，有 4 条折线。

于 2014-05-23T12:09:59.787 回答