0

利用可能な多くのポリライン フォームをクリックするとポップアップする情報ウィンドウに、さまざまなデータを表示する必要があります。

私はこれについて多くの解決策を検討してきましたが、これは私が遭遇した1つの例です。

Google Maps API - 配列と InfoWindows の問題

しかし、この解決策はうまくいかないようです。ポリラインをクリックしても情報ウィンドウが表示されません。これについて私を助けてください...私は別のコードを使用し、配列の最後の要素のみを表示します..私がすることは、forループを介してポリラインを追加することです.これで私を助けてください..これが私のコードです.

    var map;
    var polylinesIn = [];
    var infowindow = new google.maps.InfoWindow();
    var infowindowArray = [];
    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 lineSymbolIn = {
            path: google.maps.SymbolPath.CIRCLE,
            scale: 2,
            strokeColor: '#FF8000'
        };


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

            var conentVal = i.toString();
            //var infowindow = new google.maps.InfoWindow();
            var netTrafficIn = [
            new google.maps.LatLng(53.3333866 + i, -6.247401 + i),
            new google.maps.LatLng(7.3, 80.6333)];

            var polylineIn = new google.maps.Polyline({
                path: netTrafficIn,
                icons: [{ icon: lineSymbolIn, offset: '100%'}],
                strokeColor: "  #FF8000",
                strokeOpacity: 1.0,
                strokeWeight: 1,
                geodesic: true

            });
            polylineIn.setMap(map);
            polylinesIn[i]=polylineIn;
            animateCircleIn(i);

            addInfowindow(i.toString());
            createInfoWindow(i);                                         
        }

    }

    function addInfowindow(contentVal) {
        infowindow = new google.maps.InfoWindow({ content: contentVal });
        infowindowArray.push(infowindow);
    }

    function createInfoWindow(id) {
        google.maps.event.addListener(polylinesIn[id], 'click', (function (id) {
            return function () {
                infowindowArray[id].open(map, polylinesIn[id]);
            }
        })(id));

    }

    function animateCircleIn(id) {
        var count = 0;
        offsetId = window.setInterval(function () {
            count = (count + 1) % 200;

            var icons = polylinesIn[id].get('icons');
            icons[0].offset = (count / 2) + '%';
            polylinesIn[id].set('icons', icons);
        }, 20);

    }

どうもありがとうございました ：）

yalが提案したようにいくつかの変更を加えましたが、まだ情報ウィンドウが表示されません..助けてください..どうもありがとうございました:)

4

3 に答える 3

0

次のコードが機能します。

            (function (id) {
                google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
                    infowindow.content = "x" + id.toString();
                    infowindow.position = event.latLng;
                    infowindow.open(map); //,flightPath);
                });
            })(i)

このクロージャーをforループ内に追加して問題を解決しました..正しい方向に向けてくれてありがとう.. :)

于 2012-08-15T08:36:50.520 に答える
0

問題は、持っているすべてのポリラインに同じ infoWindow を使用していることです。コードのこの部分で infowindow の値を変更すると、

google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
            infowindow.content = "x" + id.toString();
            infowindow.position = event.latLng;
            infowindow.open(map); //,flightPath);
    });

参照によって最初の値を変更すると、ポリラインでアンカーされたすべての情報ウィンドウも変更されます。関数内で使用する情報ウィンドウは、インスタンス化されたもののコピーではなく、代わりに参照です。

この場合、2 つの異なることを試すことができます。まず、関数内で使用して、必要なすべてのポリラインに情報ウィンドウを作成しinfowindow = new google.maps.InfoWindow();ます。

または、穴の新しいスコープを作成することもできます。その場合は、この投稿を読むことをお勧めします: Google Maps API - 配列と InfoWindows のトラブル

于 2012-08-14T16:26:58.243 に答える
0

あなたがリンクした他の質問は、あなたの問題を説明しています。値を変更しないように、反復する変数のコピーを使用する必要があります。以前の質問で示しました:複数の測地ポリライン上のシンボルをアニメーション化する

既にそれを行っている関数 animateCircle にイベントをアタッチするだけで移動できます。

function animateCircleIn(id) {
    var count = 0;
    offsetId = window.setInterval(function () {
        count = (count + 1) % 200;

        var icons = polylinesIn[id].get('icons');
        icons[0].offset = (count / 2) + '%';
        polylinesIn[id].set('icons', icons);
    }, 20);

        google.maps.event.addListener(polylinesIn[id], 'click', function (event) {
            infowindow.content = "x" + id.toString();
            infowindow.position = event.latLng;
            infowindow.open(map); //,flightPath);
        });
}

しかし、ここでの本当の問題は、以前の質問または質問にリンクした質問から何も学ばなかったことです。「javascript クロージャー」について読む必要があります。あなたがそれについて尋ねるのが最後になることを本当に願っています。

于 2012-08-14T08:45:30.703 に答える