相同的infowindow循环地理编码google map

时间:2018-09-07 10:34:56

标签: javascript google-maps infowindow

我的信息窗口有问题。每当我单击以查看infoWindow时,它将始终打开最后添加的位置的infowindow。谁能看到我在做什么错?谢谢!

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);
        }
    })
}

php文件中的placeArray

/*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 :(得分:0)

您每次在循环内都需要创建一个新的标记对象。每次使用&lt;div&gt; class="col-md-6">data&lt;/div&gt; &lt;div&gt;div class="col-md-6">data &lt;/p&gt; 关键字声明一个新的标记对象。

按照有关JavaScript Scope : 的链接

  

自动全局

     

如果将值分配给尚未声明的变量,则它将   将自动成为GLOBAL变量。

由于该标记仅保留对最后添加的标记的引用。您需要在循环中每次创建一个新的标记对象。使用var关键字声明一个新的标记对象。

var

答案 1 :(得分:0)

我建议不要创建像这样的多个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 );
        });
    }
}