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

polyline 変数は 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

この問題に対する簡単な答えが見つかりました。GoogleマップAPI v3を使用しています。https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

下にスクロールして、変数lineCoordinatesがある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)
];

アニメーションは、lineCoordinates 内のすべてのオブジェクトで発生します。この例では、4 つのポリラインがあります。

于 2014-05-23T12:09:59.787 に答える