та же петля Infowindow геокод Google Map - PullRequest
Новая
       24

та же петля Infowindow геокод Google Map

0 голосов
/ 07 сентября 2018

У меня проблема с информационным окном. Всякий раз, когда я щелкаю, чтобы просмотреть информационное окно, оно всегда открывает информационное окно для последнего добавленного местоположения. Кто-нибудь может увидеть, что я делаю не так? Спасибо! 

for (i = 0; i < placeArray.length; i++) {
    geocoder = new google.maps.Geocoder();
    var text = placeArray[i][0];
    console.log(text);
    geocoder.geocode( { 'address': placeArray[i][0]}, function(results, status) {
        if (status == 'OK') {

            test = results[0].geometry.location;
            marker = new google.maps.Marker({
                position: new google.maps.LatLng(test.lat(), test.lng()),
                animation: google.maps.Animation.DROP,
                map: map,
                icon: image,
                text : text
            });
            google.maps.event.addListener(marker, 'click', (function (marker,i) {
                return function () {
                    infowindow = new google.maps.InfoWindow({});
                    infowindow.setContent(marker.text);
                    infowindow.open(map, marker);
                }
            })(marker, i));
        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    })
}

placeArray из php файла 

/*foreach*/

echo '<script language="JavaScript">';
echo "placeArray[$count] = ['$name<br>$addressStreet $addressPost $addressCity<br><a href=\"mailto:$mail\"  class=\"link\">$mail</a><br><a href=\"tel:$phone\" class=\"link\">$phone</a>','$lang','$long']";
echo '</script>';

/*end foreach*/

Тестовый массив: 

   0: Array(3) [ "Serwis Narciarski i Rowerowy<br>Długa 8  87-100 Toruń<br><a href=\"mailto:\"  class=\"link\"></a><br><a href=\"tel:566210358\" class=\"link\">566210358</a>", "53.0299769", "18.5891052" ]
​
   1: Array(3) [ "PHU \"EKSPLO\" s.c. Zakład Produkcyjny i sklep firmowy<br>Mikołaja Zyblikiewicza 8 31-029 Kraków<br><a href=\"mailto:eksplo@tlen.pl\"  class=\"link\">eksplo@tlen.pl</a><br><a href=\"tel:602680588\" class=\"link\">602680588</a>", "50.0599421", "19.9431942" ]
​
   2: Array(3) [ "Sport4you Sp. z o.o.<br>Kołłątaja 27-28 50-004 Wrocław<br><a href=\"mailto:biuro@ski4you.pl\"  class=\"link\">biuro@ski4you.pl</a><br><a href=\"tel:530 120 990\" class=\"link\">530 120 990</a>", "51.102669", "17.037216" ]
​
   length: 3
​

Ответы [ 2 ]

0 голосов
/ 07 сентября 2018

Я бы посоветовал не создавать несколько Geocoder объектов, подобных этому, вам нужен только один экземпляр геокодера, но передать ему все аргументы в цикле. 

if( placeArray.length > 0 ){

    /*
        Where is `image` defined?
    */


    const geocallback=function(results,status,text,image){
        if( status=='OK' ){
            let pos = results[0].geometry.location;
            let marker = new google.maps.Marker({
                position: new google.maps.LatLng(pos),
                animation: google.maps.Animation.DROP,
                map: map,
                icon: image,
                text : text
            });

            google.maps.event.addListener( marker, 'click', function(event){
                let infowindow = new google.maps.InfoWindow();
                    infowindow.setContent( this.text );
                    infowindow.open( this.position );
            }.bind( marker ) );

        } else {
            alert('Geocode was not successful for the following reason: ' + status);
        }
    };

    let geocoder = new google.maps.Geocoder();
    for( i = 0; i < placeArray.length; i++ ) {
        geocoder.geocode( { 'address': placeArray[i][0] }, function(results,status){
            geocallback.call( this, results, status, placeArray[i][0], image );
        });
    }
}
0 голосов
/ 07 сентября 2018

Вам необходимо создавать новый объект маркера каждый раз внутри цикла. Используйте ключевое слово var, чтобы каждый раз объявлять новый маркерный объект.

По ссылке, приведенной около Область JavaScript:

Автоматически глобально

Если вы присвоите значение переменной, которая не была объявлена, она автоматически станет глобальной переменной.

Из-за этого маркера содержится ссылка только на последний добавленный маркер. Вам нужно каждый раз создавать новый маркерный объект внутри цикла. Используйте ключевое слово var, чтобы объявить новый маркерный объект. 

var test = results[0].geometry.location;
var marker = new google.maps.Marker({
            position: new google.maps.LatLng(test.lat(), test.lng()),
            animation: google.maps.Animation.DROP,
            map: map,
            icon: image,
            text : text
        });
...