информационные вдовы с различной информацией о полилиниях google map api v3

Мне нужно отображать разные данные в информационном окне, которое появляется, когда кто-то щелкает полилинию из множества доступных,

Я просмотрел множество решений для этого, вот один пример, с которым я столкнулся,

API Карт Google — проблемы с массивами и 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);

    }

Спасибо большое :)

Окей, я сделал некоторые изменения, как предложил Ял, но все равно информационные окна не появляются.. пожалуйста, помогите.. большое спасибо :)


javascript google-maps-api-3 polyline infowindow
person user1584241    schedule 14.08.2012    source источник
comment
Вы уже задавали этот вопрос. Это та же ситуация, что и в stackoverflow.com/ вопросов/11931415/ Пожалуйста, закройте javascript Google, и вы можете узнать что-то новое вместо того, чтобы задавать один и тот же вопрос снова и снова.   -  person slawekwin    schedule 14.08.2012
comment
Эй, спасибо за ответ на предыдущий 1. но я здесь потерялся, я пробовал использовать функции, но тогда ничего не отображалось :( я попробую еще .. спасибо еще раз   -  person user1584241    schedule 14.08.2012
comment
я попробовал и отредактировал код. но до сих пор нет информационного окна :(   -  person user1584241    schedule 15.08.2012

Ответы (3)


arrow_upward
0
arrow_downward

Другой вопрос, на который вы ссылаетесь, описывает вашу проблему. Вы должны использовать копию повторяемой переменной, чтобы она не меняла свое значение. Я показал это вам в предыдущем вопросе: Анимация символа на нескольких геодезических полилиниях

Вы можете просто переместить присоединение вашего события к функции 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». Я очень надеюсь, что ты в последний раз спрашиваешь об этом.

person slawekwin    schedule 14.08.2012
comment
Спасибо за ваш ответ. очень признателен .. я пытался учиться, но я очень новичок в этом .. я внимательно читал материалы .. когда я разделяю его на новый метод, ничего не отображается, в этом была проблема ... :) - person user1584241; 14.08.2012
comment
в таком случае извините за мою вспыльчивость :-) код, который вы разместили в вопросе, отображает информационное окно для каждой полилинии, только с последним индексом, или я вас неправильно понял? - person slawekwin; 14.08.2012
comment
нет проблем .. я могу понять :) дааа .. первый код отображает последний индекс для каждой полилинии в информационном окне ... и наличие его в функции animateCircle не дает информационное окно, ничего не происходит, когда я нажимаю полилинию .. я устал от метода в упомянутом вопросе, который я задал так же хорошо ... тот же результат ... нет информационного окна :( - person user1584241; 14.08.2012

arrow_upward
0
arrow_downward

Проблема в том, что вы используете одно и то же информационное окно для всех полилиний, которые у вас есть. Когда вы меняете значение информационного окна в этой части кода

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

вы измените значение первого по ссылке, и все информационные окна, привязанные к полилинии, тоже изменятся. Информационное окно, которое вы используете внутри своей функции, не является копией созданного, а является ссылкой.

В этом случае вы можете попробовать две разные вещи. Во-первых, создайте информационное окно для каждой полилинии, которую вы хотите, используя infowindow = new google.maps.InfoWindow(); внутри вашей функции.

Или вы можете создать новую область видимости. В этом случае я предлагаю вам прочитать этот пост: API Карт Google - Проблемы с Массивы и информационные окна

person Daniel    schedule 14.08.2012
comment
эй, спасибо за ответ .. очень признателен :) я попытался поместить его в другую функцию, но ничего не появляется, как и в информационном окне при щелчке. я устал ссылаться на положение массива полилинии, а также :( это так запутанно... - person user1584241; 15.08.2012
comment
я отредактировал код, можете ли вы сказать мне, что не так сейчас? информационные окна не появляются.. :( - person user1584241; 15.08.2012

arrow_upward
0
arrow_downward

Работает следующий код:

            (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, что решило проблему. Спасибо, что указали мне правильное направление, ребята.. :)

person user1584241    schedule 15.08.2012