相同的infowindow循环地理编码谷歌地图

Question

我有一个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:[phone]\" 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:[email protected]\"  class=\"link\">[email protected]</a><br><a href=\"tel:[phone]\" 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:[email protected]\"  class=\"link\">[email protected]</a><br><a href=\"tel:[phone]\" class=\"link\">530 120 990</a>", "51.102669", "17.037216" ]
​
   length: 3
​

Answer 1

您需要在循环内每次创建一个新的标记对象。使用var关键字每次都声明一个新的标记对象。

根据给出的关于JavaScript Scope : 的链接

自动全局

如果为尚未声明的变量赋值，它将自动成为GLOBAL变量。

由于此标记仅保留对最后添加的标记的引用。您需要在循环内每次创建一个新的标记对象。使用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
        });

Answer 2

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