我正在尝试使用 google 的 map api v3 构建交互式 map 。这个想法是使用 asp 用一些文本填充 map 上的标记列表。
创建 map 、原始标记和内容很简单，但现在我想要一个指向 map 外各种标记的链接列表。当单击列表中的一个项目时，我希望它平移到该位置并打开相应的文本框(信息窗口)。
一切正常，除了我无法打开信息窗口。谁能建议我在这里做错了什么？
<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>
最佳答案
您需要将标记存储在以后可以使用的数组中。现在的代码
markerID = this.id;
只是要设置为
"marker1" ，它实际上不是标记对象。您需要创建一组标记:var markers = new Array();
创建标记后，您需要将其存储在数组中:
markers.push(marker);
当您的
<li> element 收到一个单击事件，您需要从标记数组中检索标记:marker = markers[this.id];
这是一个工作示例:
<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>
关于google-maps-api-3 - google maps api .... 从 map 外的链接显示标记信息窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9469322/