谷歌地图监听器打开个人信息窗口从外部链接

本文关键字：信息窗 窗口 从外部 链接 信息 监听器 谷歌地图 | 更新日期: 2023-09-27 17:51:04

我有一个谷歌地图，我的位置正确地从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);
        }

谷歌地图监听器打开个人信息窗口从外部链接

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

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);
    }
}
相关文章：