借助多个经度和纬度在Google地图上显示标记

时间:2011-11-11 19:10:04

标签: asp.net-mvc google-maps google-maps-markers

我希望借助我在控制器中使用的lat和long来在地图上显示多个地方标记。没有构建错误,我也能够看到地图与各种地标,但只有最后一个信息窗口响应点击事件。

@section Script {   

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

}
  <div id="map_canvas" style="width: 875px; height: 600px">  
</div>  ` 

<script type="text/javascript">  
      //display the map                      

      var stockholm = new google.maps.LatLng(59.32522, 18.07002);  
        var myOptions = {  
                 zoom: 4, 
                center: stockholm,  
                mapTypeId: google.maps.MapTypeId.ROADMAP  
            };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);  
     //display markers   
     @foreach (var item in Model)  
     {  
    <text>  
      var latLng = new google.maps.LatLng('@(item.Latitude)', '@(item.Longitude)');  
      var title = '@(item.Title)';  
      var contentString = '<h3>' + title + '</h3>' 


       var marker = new google.maps.Marker({
             position: latLng,
             map: map
    });


    var infoWindow = new google.maps.InfoWindow();


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

    </text>
    }
</script>

1 个答案:

答案 0 :(得分:0)

对于模型中的每个项目,您都要创建一个标记。但是,将事件侦听器添加到标记(用于单击)的代码位于循环之外。

事件监听器仅被添加到最后一个标记,而不是每个标记。