Google Map API中的多个infoWindow

时间:2016-01-14 16:26:14

标签: google-maps-api-3 google-maps-markers

我正在尝试为多个标记创建多个infowindow,但它似乎只是引用了最后一个infowindow

这是我的代码(在for循环中,_lat和_long是唯一值):

                        marker.addListener('click', function(){
                            //markerInfoWindow.close();
                            markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                            markerInfoWindow.open(map, this); 
                        }); 

                        marker.setMap(map); 

我用标记测试,标记显示正确,但所有这些都链接到最后一个infoWindow。

如何为每个标记创建新的infoWindow?

更新

这完全是我更新后的功能:

        function getListPosition(listMarkers, map){
            db.transaction(function(tx){
                tx.executeSql('SELECT * FROM Position', [], function(tx, rs) {
                    var numberOfItems = rs.rows.length; 

                    var markerInfoWindow = new google.maps.InfoWindow();
                    var marker;

                    for (var i = 0; i < numberOfItems; i++) {

                        var _lat = rs.rows.item(i).Lat;
                        var _long = rs.rows.item(i).Long;

                        marker = new google.maps.Marker({
                            position: {lat: _lat , lng: _long}
                        });

                        listMarkers.push(marker);

                        google.maps.event.addListener(marker, 'click', (function(marker) {
                            return function() {
                                markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                                markerInfoWindow.open(map, marker);
                            }
                        })(marker));

                        // marker.addListener('click', function(){
                        //     //markerInfoWindow.close();
                        //     markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + _lat + ',' + _long + ');">Unsave place</a>', true);
                        //     markerInfoWindow.open(map, this); 
                        // }); 

                        marker.setMap(map); 

                        // Set map center to the last marker
                        if (i == numberOfItems - 1){
                            map.setCenter({lat: _lat, lng: _long});
                        } 

                    }

                });
            }, function(err){
                console.log('Error when get list position. Error code: ' + err.code);
            });
        }

1 个答案:

答案 0 :(得分:0)

您需要在单击侦听器函数运行时所需的循环变量上进行函数闭包。在您的情况下_lat_lng。尽管如此,从标记(this)获取它们可能是最简单的:

google.maps.event.addListener(marker, 'click', function(evt) {
  markerInfoWindow.setContent('<a href="#" onclick="onUnsavePlace(' + this.getPosition().lat() + ',' + this.getPosition().lng() + ');">Unsave place</a>', true);
  markerInfoWindow.open(map, this);
});

(未经测试)