1

我有一个谷歌地图，可以从 linq 源正确地绘制我的位置。我还可以单击标记以查看信息窗口中的内容。

在标记了我所有位置的地图下方，我显示了标记位置数据的列表。我想从该数据创建一个链接，该链接将在地图上打开相应标记的信息窗口。我只能在加载页面时显示所有标记，但不能显示单个标记。

    var currentlyOpenedInfoWindow = null;


function init_map(map_canvas_id, lat, lng, zoom, markers, infoWindowContents) {
    var myLatLng = new google.maps.LatLng(lat, lng);

    var options = {
        zoom: zoom,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };


    var map_canvas = document.getElementById(map_canvas_id);

    var map = new google.maps.Map(map_canvas, options);

    if (markers && markers.length > 0) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < markers.length; i++) {
            var marker = new google.maps.Marker(markers[i]); 

            marker.setMap(map);


            bounds.extend(marker.getPosition());

            if (infoWindowContents && infoWindowContents.length > i)
                createInfoWindow(map, marker, infoWindowContents[i]);


        }

        map.fitBounds(bounds);
        map.setCenter(bounds.getCenter());


    }   
}

function createInfoWindow(map, marker, infoWindowProperties) {
    var info = new google.maps.InfoWindow(infoWindowProperties);

    google.maps.event.addListener(marker, 'click', function() {
        if (currentlyOpenedInfoWindow != null)
            currentlyOpenedInfoWindow.close();

        info.open(map, marker);
        currentlyOpenedInfoWindow = info;

    });

}

数据是从我的页面后面的代码中调用的，并绘制为：

// Loop through each nearby location and build up the JavaScript to place the markers
            var locations = new List<string>();
            var infoWindowContents = new List<string>();

            DataView nearbyLocations = schoolData_Record.DefaultView;
            var count = 1;

            foreach (DataRowView location in nearbyLocations)
            {
                locations.Add(string.Format(
                                @"{{ 
                                                title: ""{0}"", 
                                                position: new google.maps.LatLng({1}, {2}),
                                                icon: ""../../Frontend/Images/v2/GoogleMaps/NumberToImageHandlerCS.ashx?number={3}""
                                            }}",
                                   location["Name"],
                                   location["Latitude"],
                                   location["Longitude"],
                                   count
                                )
                              );


                infoWindowContents.Add(string.Format(
                                @"{{ 
                                                content: ""<div class=\""infoWindow\""><b>Store #{0}</b><br />{1}<br />{2}, {3} {4}</div>""
                                            }}",
                                   location["Name"],
                                   location["StreetAddress"],
                                   location["city"],
                                   location["State"],
                                   location["Zipcode"]
                                )
                           );

                count++;


            }

            var locationsJson = "[" + string.Join(",", locations.ToArray()) + "]";
            var overlayContentsJson = "[" + string.Join(",", infoWindowContents.ToArray()) + "]";



            // Inject the Google Maps script
            ClientScript.RegisterStartupScript(this.GetType(), "Google Maps Initialization",
                                               string.Format("init_map('map_canvas', {0}, {1}, 13, {2}, {3});", lat, lng, locationsJson, overlayContentsJson), true);
        }
4

1 回答 1

2

我遇到了同样的麻烦——你需要在一个外壳中创建标记——这是我在我的项目中使用的代码，你应该能够从中破解它。

var markers = new Array();
var markerLatLongs = new Array();
var markerBounds = new google.maps.LatLngBounds( );
var infoWindows = new Array();

function initialize() {
    var mapOptions = {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map'),
        mapOptions);
    bPolygon.setMap(map);
    map.fitBounds( bLatLongBounds );

    createMarkers();
    createInfoWindows();
}

function createMarkers() {
    for (var j = 0; j < sites.length; j++)
    {
        var osRef = new OSRef(sites[j].easting, sites[j].northing);
        var latLong = osRef.toLatLng();
        markerLatLongs[j] = new google.maps.LatLng(latLong.lat.toFixed(6),latLong.lng.toFixed(6))
        markerBounds.extend(markerLatLongs[j]);
        markers[j] = new google.maps.Marker({
            position: markerLatLongs[j],
            map: null,
            title: sites[j].siteName
        });    

    }

}



function createInfoWindows() {
    for (var i = 0; i < sites.length; i++) {
        (function(i){
           infoWindows[i] = new google.maps.InfoWindow({maxWidth:200, content: '<div class="info-window-content"><strong>'+sites[i].siteName+'</strong><p>'+sites[i].summary+'</p><a class="green-link" href="http://'+sites[i].url+'" target="_blank">Read more...</a></div>'});
           google.maps.event.addListener(markers[i], 'click', function(e) {
              infoWindows[i].open(map, this);
           });
        })(i);
    }
}
于 2013-01-07T20:11:29.713 回答