Google Map API - 在foreach循环中的infowindow

时间:2013-11-05 08:53:55

标签: javascript google-maps razor google-maps-api-3

您好我正在从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);

有人可以帮助我为每个创建的标记添加infowindow吗?

感谢您的回复和时间。

这是我从SqlServerCe加载的方式

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

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

1 个答案:

答案 0 :(得分:2)

您可以使用以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,然后将信息添加到数组中。您可以使用相同的逻辑