1

こんにちは、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} ;
4

1 に答える 1

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を追加してから、情報を配列に追加しました。同じロジックを使用できます

于 2013-11-05T09:03:12.380 に答える