谷歌地图API ...显示标记infowindow从地图以外的链接 [英] google maps api .... showing a markers infowindow from a link outside of the map
问题描述
我正在尝试使用google的map api v3构建交互式地图。这个想法是使用asp在一些文本中填充地图上的标记列表。
I'm trying to build an interactive map using google's map api v3. The idea is to populate a list of markers on the map with some text using asp.
创建地图，原始标记和内容很简单，但现在我会就像在地图之外的各种标记的链接列表一样。当点击列表中的项目时，我想让它平移到该位置并打开相应的文本框（infowindow）。
Creating the map, original markers, and content was straightforward, but now I'd like a list of links to the various markers outside of the map. When an item on the list is clicked I'd like it to pan to the location and open the respective text box (infowindow).
除了我不能打开信息窗口。任何人都可以提出我在这里做错了什么？
Everything works except I can't get the info window to open. Can anyone suggest what I'm doing wrong here?
<script type="text/javascript">
var MapStart = new google.maps.LatLng(32.036020,34.760742);
var marker;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
<%
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
var marker<%=varCount%> = new google.maps.Marker({
position: new google.maps.LatLng(<%=varLong%>,<%=varLat%>),
map: map,
animation: google.maps.Animation.DROP,
title : "<%=rsListItem.Fields.Item("heading").Value%>"
});
google.maps.event.addListener(marker<%=varCount%>, 'click', function() {
map.panTo(new google.maps.LatLng(<%=varLong%>, <%=varLat%>));
infowindow.setContent('<%=(rsListItem.Fields.Item("brief").Value)%>');
infowindow.open(map,marker<%=varCount%>);
});
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
}
$(document).ready(function() {
$("#map_list ul li").click(function() {
markerID = this.id;
markerContent = $("div.marker_brief",this).html();
varLong = $("div.marker_long",this).html();
varLat = $("div.marker_lat",this).html();
map.panTo(new google.maps.LatLng(varLong, varLat));
infowindow.setContent(markerContent)
infowindow.open(map,markerID);
});
});
</script>
<div id="map"></div>
<div id="map_list">
<ul>
<%
vtype=100160
Call ListItem(vtype,langId)
varCount = 0
while not rsListItem.EOF
varCount = varCount + 1
varLong = rsListItem.Fields.Item("custom_text1").Value
varLat = rsListItem.Fields.Item("custom_text2").Value
%>
<li id="marker<%=varCount%>"><%=rsListItem.Fields.Item("heading").Value%>
<div class="marker_brief"><%=rsListItem.Fields.Item("brief").Value%></div>
<div class="marker_long"><%=varLong%></div>
<div class="marker_lat"><%=varLat%></div>
</li>
<%
rsListItem.MoveNext()
Wend
rsListItem.Close()
Set rsListItem = Nothing
%>
</ul>
</div>
推荐答案
您需要将标记存储在数组中，稍后再使用。现在代码
You need to store your markers in an array that can be used later. Right now the code
markerID = this.id;
只要设为marker1，它实际上不是标记对象。您需要创建一组标记：
Is just going to be set to "marker1", it isn't actually the marker object. You need to create a collection of markers:
var markers = new Array();
创建标记后，您需要将其存储在数组中：
After you create a marker you need to store it in the array:
markers.push(marker);
当您的< li> 元素收到您需要从标记数组中检索标记的点击事件：
When your <li> element receives a click event you need to retrieve the marker from the array of markers:
marker = markers[this.id];
下面是一个工作示例：
Here is a working example:
<html>
<head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var MapStart = new google.maps.LatLng(38.634036,-111.785889);
var markers;
var map;
var infowindow = new google.maps.InfoWindow();
function initialize() {
markers = new Array();
var mapOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: MapStart
};
map = new google.maps.Map(document.getElementById("map"),
mapOptions);
$("#map_list ul li").each(function(index) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng($(this).children(".marker_long").text(), $(this).children(".marker_lat").text()),
map: map,
animation: google.maps.Animation.DROP,
title : $(this).children(".marker_title").text(),
brief: $(this).children(".marker_brief").text()
});
google.maps.event.addListener(marker, 'click', function() {
map.panTo(new google.maps.LatLng(marker.position.Sa, marker.position.Ta));
infowindow.setContent(marker.brief);
infowindow.open(map,marker);
});
markers.push(marker);
});
}
$(document).ready(function(){
$("#map_list ul li").click(function(){
marker = markers[this.id];
markerContent = $("div.marker_brief",this).html();
varLong = $("div.marker_long",this).html();
varLat = $("div.marker_lat",this).html();
map.panTo(new google.maps.LatLng(varLong, varLat));
infowindow.setContent(markerContent)
infowindow.open(map,marker);
});
});
</script>
</head>
<body onload='initialize();'>
<div id="map" style="width: 450px; height: 350px;"></div>
<div id="map_list">
<ul>
<li id="0">
<div class="marker_title">Salt Lake City</div>
<div class="marker_brief">Capital of Utah</div>
<div class="marker_long">40.763901</div>
<div class="marker_lat">-111.901245</div>
</li>
<li id="1">
<div class="marker_title">Provo</div>
<div class="marker_brief">Location of BYU</div>
<div class="marker_long">40.25228</div>
<div class="marker_lat">-111.659546</div>
</li>
</ul>
</div>
</body>
</html>
这篇关于谷歌地图API ...显示标记infowindow从地图以外的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
