javascript - Google Map API - foreach 循环中的信息窗口

Question

你好，我正在从 SqlServerCe 中检索数据，所以我创建了 foreach 循环来创建标记 - 它可以创建多个标记，但现在我想为每个标记添加一个信息窗口。但是现在每当我点击标记时，信息窗口就会在最后创建的标记上弹出。

<script>
function initialize() {
    var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
    };
    var map=new google.maps.Map(document.getElementById("googleMap")
      , mapProp);

    $(function () {
 @foreach (var row in data)
 {
   <text>
        var marker = new google.maps.Marker({ position: new google.maps.LatLng(@row.GeoLat,  @row.GeoLong),
            map: map });

        marker.info = new google.maps.InfoWindow({
            content: "test"
        });

        google.maps.event.addListener(marker, 'click', function() {
            marker.info.open(map, marker);
        });

        </text>


 }
    });
}



google.maps.event.addDomListener(window, 'load', initialize);

有人可以帮我为每个创建的标记添加信息窗口吗？

感谢您的回复和抽空。

这是我从 SqlServerCe 加载的方式

var db = Database.Open("StarterSite");

var data = db.Query("SELECT DescriptionService,GeoLong,GeoLat FROM services");
var array = new []{data} ;

Answer 1

您可以使用以下用 javascript 编写的

var infoWindowContent = [];
for(var index=0; index< places.length; index++){
        infoWindowContent[index] = getInfoWindowDetails(places[index]);
        var location = new google.maps.LatLng(places[index].latitude,places[index].longitude);
        bounds.extend(location);
        marker = new google.maps.Marker({
            position    : location,
            map         : map,
            title       : places[index].title
        });

        google.maps.event.addListener(marker, 'click', (function(marker,index){
            return function(){
                infoWindow.setContent(infoWindowContent[index]);
                infoWindow.open(map, marker);
                map.setCenter(marker.getPosition());
                map.setZoom(15);
            }
        })(marker,index));

    }   


    function getInfoWindowDetails(location){
        var contentString = '<div id="content" style="width:270px;height:100px">' +
                            '<h3 id="firstHeading" class="firstHeading">' + location.title + '</h3>'+
                            '<div id="bodyContent">'+
                                '<div style="float:left;width:100%">'+ location.address + '</div>'+
                            '</div>'+
                        '</div>';
        return contentString;
    }

我添加了一个数组 infoWindowContent，然后将信息添加到数组中。您可以使用相同的逻辑