谷歌地图听众打开外部链接个人信息窗口 [英] Google Maps listeners to open individual infowindow from external link
本文介绍了谷歌地图听众打开外部链接个人信息窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个谷歌从一个LINQ源正确映射图我的位置。我也可以单击该标记看到信息窗口中的内容。
与所有我的位置标在地图下面，我将展示标记的位置数据的列表。我想创建从该数据将打开地图相应标记的信息窗口的链接。我只能够得到所有的标记显示，当我加载页面，而不是单个的标记。
VAR currentlyOpenedInfoWindow = NULL;
功能init_map（map_canvas_id，纬度，经度，缩放，标记，infoWindowContents）{
VAR myLatLng =新google.maps.LatLng（纬度，经度）; VAR的选择= {
变焦：变焦，
中心：myLatLng，
mapTypeId设为：google.maps.MapTypeId.ROADMAP
};
VAR map_canvas提供=的document.getElementById（map_canvas_id）; VAR地图=新google.maps.Map（map_canvas提供，期权）; 如果（标记＆放大器;＆放大器; markers.length大于0）{
VAR边界=新的google.maps.LatLngBounds（）; 对于（VAR I = 0; I＆LT; markers.length;我++）{
VAR的标记=新google.maps.Marker（标记[I]）; marker.setMap（地图）;
bounds.extend（marker.getPosition（））; 如果（infoWindowContents＆放大器;＆放大器; infoWindowContents.length I标记）
createInfoWindow（地图，标记，infoWindowContents [I]）;
} map.fitBounds（边界）;
map.setCenter（bounds.getCenter（））;
}
}功能createInfoWindow（地图，标记，infoWindowProperties）{
VAR信息=新google.maps.InfoWindow（infoWindowProperties）; google.maps.event.addListener（标记，'点击'，功能（）{
如果（currentlyOpenedInfoWindow！= NULL）
currentlyOpenedInfoWindow.close（）; info.open（地图，标记）;
currentlyOpenedInfoWindow =信息; }）;}
的数据是从页我的背后code调用，并绘制成：
//循环每一个位置附近，并建立了JavaScript来放置标记
VAR的位置=新的List＆LT;串GT;（）;
VAR infoWindowContents =新的List＆LT;串GT;（）; 数据视图nearbyLocations = schoolData_Record.DefaultView;
变种数= 1; 的foreach（在nearbyLocations DataRowView的位置）
{
locations.Add（的String.format（
@{{
标题：{0}
位置：新google.maps.LatLng（{1}，{2}）
图标：../../Frontend/Images/v2/GoogleMaps/NumberToImageHandlerCS.ashx?number={3}
}}。
位置[名称]，
位置[纬度]，
位置[经度]，
计数
）
）;
infoWindowContents.Add（的String.format（
@{{
内容：＆LT; DIV CLASS = \\信息窗口\\＆GT;＆LT; B＆GT;存储＃{0}＆LT; / B＆GT;＆LT; BR /＆GT; {1}＆LT; BR /＆GT; {2} {3} {4}＆LT; / DIV＆gt;中
}}。
位置[名称]，
位置[的StreetAddress]，
位置[市]
位置[国家]
位置[邮编code]
）
）; 算上++;
} 变种locationsJson =[+的string.join（，，locations.ToArray（））+];
变种overlayContentsJson =[+的string.join（，，infoWindowContents.ToArray（））+]; //注入谷歌地图脚本
ClientScript.RegisterStartupScript（this.GetType（），谷歌地图初始化，
的String.Format（init_map（'map_canvas提供'，{0}，{1}，13，{2}，{3}）;，纬度，经度，locationsJson，overlayContentsJson），真）;
}
解决方案
我有同样的烦恼 - 你需要在一个外壳打造的标志 - 这里是code我在我的项目中使用，你应该能够从这个共同破解它。
VAR指标=新的Array（）;
VAR markerLatLongs =新的Array（）;
VAR markerBounds =新的google.maps.LatLngBounds（）;
VAR信息窗口=新的Array（）;函数初始化（）{
VAR的MapOptions = {
mapTypeId设为：google.maps.MapTypeId.ROADMAP
};
地图=新google.maps.Map（的document.getElementById（地图），
的MapOptions）;
bPolygon.setMap（地图）;
map.fitBounds（bLatLongBounds）; createMarkers（）;
createInfoWindows（）;
}功能createMarkers（）{
对于（VAR J = 0; J＆LT; sites.length; J ++）
{
VAR osRef =新OSRef（网站[J] .easting，网站[J] .northing）;
VAR经纬度= osRef.toLatLng（）;
markerLatLongs [J] =新google.maps.LatLng（latLong.lat.toFixed（6），latLong.lng.toFixed（6））
markerBounds.extend（markerLatLongs [J]）;
标记[J] =新google.maps.Marker（{
位置：markerLatLongs [J]。
图：空，
标题：网站[J] .siteName
}）; }}功能createInfoWindows（）{
对于（VAR I = 0; I＆LT; sites.length;我++）{
（函数（ⅰ）{
信息窗口由[i] =新google.maps.InfoWindow（{了maxWidth：200，含量：'＆LT; DIV class=\"info-window-content\"><strong>'+sites[i].siteName+'</strong><p>'+sites[i].summary+'</p><a类=绿色链接的href =HTTP：//+网站[I]的.url +'目标=_空白＆GT;更多...＆LT; / A＆GT;＆LT; / DIV＆GT;'}）;
google.maps.event.addListener（标记[我]，'点击'，功能（E）{
信息窗口[I]。开（地图，这一点）;
}）;
}）（一世）;
}
}
I have a google map the plots my location correctly from a linq source. I can also click the marker to see the content within the info window.
Below the map with all my location marked, I show a list of the marked location data. I want to create a link from that data that will open the info window on the map for the corresponding marker. I have only been able to get all the markers to show when I load the page, but not for individual markers.
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;
});
}
The data is called in from my code behind page and plotted as:
// 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);
}
解决方案
I had the same trouble - you need to create the markers in an enclosure - here is the code I used on my project you should be able to hack it together from this.
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);
}
}
这篇关于谷歌地图听众打开外部链接个人信息窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
