信息寡妇在折线上的不同信息google map api v3

时间:2012-08-14 08:12:07

标签: javascript google-maps-api-3 infowindow polyline

我需要在infowindow上显示不同的数据,当有人点击多条线路时会弹出这些数据,

我已经为此寻找了许多解决方案,这是我遇到的一个例子,

Google Maps API - Trouble with Arrays and 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);

    }

非常感谢:)

Okey我做了一些改变,比如yal建议,但仍然没有出现信息..请帮助..非常感谢你。)

3 个答案:

答案 0 :(得分:0)

您链接的其他问题描述了您的问题。您必须使用您迭代的变量的副本,以便它不会更改其值。我在上一个问题中向您展示了Animate symbol on multiple geodesic polylines

你可以将你的事件附加到功能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 closure”。我真的希望这是你最后一次询问它。

答案 1 :(得分: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);
    });

您可以通过引用更改第一个的值,并且使用折线进行的所有infowindows也会更改。你在函数中使用的infowindow不是实例化的函数的副本,而是它的引用。

在这种情况下,你可以尝试两种不同的东西。首先是在函数内部使用infowindow = new google.maps.InfoWindow();为所需的每条折线创建一个信息窗口。

或者你可以创建一个洞新范围。在这种情况下,我建议你阅读这篇文章:Google Maps API - Trouble with Arrays and InfoWindows

答案 2 :(得分: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循环中添加了这个闭包,解决了这个问题。感谢你指点我正确的方向,伙计.. :)