使用自己的信息窗口在地图上显示多个标记 [英] Display multiple markers on a map with their own info windows
问题描述
我需要在地图上显示多个标记，每个标记都有自己的信息窗口.我已经毫无问题地创建了单个标记，但不知道如何为每个创建信息窗口.
I need to display multiple markers on a map, each with their own infowindow. I have created the individual markers without a problem, but don't know how to create the infowindows for each.
我正在一个基于 ASP 的网站中使用 V3 API 生成地图，标记是从一组数据库记录中创建的.标记是通过遍历 rs 并使用相关变量:
I am generating a map using the V3 API within an ASP-based website, with markers being created from a set of DB records. The markers are created by looping through a rs and defining a marker() with the relevant variables:
var myLatlng = new google.maps.LatLng(lat,long);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: 'locationname',
icon: 'http://google-maps-icons.googlecode.com/files/park.png'
});
这是在正确位置创建所有相关标记.
This is creating all the relevant markers in their correct locations.
我现在需要做的，不知道如何实现的是给每个其中有他们自己独特的信息窗口，我可以用它来显示与该标记相关的信息和链接.
What I need to do now, and am not sure of how to achieve is give each of them their own unique infowindow which I can use to display information and links relevant to that marker.
来源
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script language="javascript">
$(document).ready(function() {
//Google Maps
var myOptions = {
zoom: 5,
center: new google.maps.LatLng(-26.66, 122.25),
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
<!-- While locations_haslatlong not BOF.EOF -->
<% While ((Repeat1__numRows <> 0) AND (NOT locations_haslatlong.EOF)) %>
var myLatlng = new google.maps.LatLng(<%=(locations_haslatlong.Fields.Item("llat").Value)%>,<%=(locations_haslatlong.Fields.Item("llong").Value)%>);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: '<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>',
icon: 'http://google-maps-icons.googlecode.com/files/park.png',
clickable: true,
});
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
locations_haslatlong.MoveNext()
Wend
%>
<!-- End While locations_haslatlong not BOF.EOF -->
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker, 'dblclick', function() {
map.setZoom(14);
});
});
推荐答案
问题出在你调用 addListener()
当您遍历记录集并一次又一次地写出 javascript 以向地图添加标记时，您只调用一次事件侦听器.此外，您永远不会真正创建 InfoWindow 类型，所以你永远没有任何东西可以调用 open().
While you loop through your recordset and write out the javascript again and again and again and again for adding a marker to the map, you only call the event listener once. Also, you never actually create any objects of the InfoWindow type, so you never have anything to call open() on.
快速而肮脏的解决方案是在创建 marker 之后但在结束 While 循环之前添加它.
The quick and dirty solution is to add this after you create your marker but before you end your While loop.
var infowindow = new google.maps.InfoWindow({
content: '<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
但是不要这样做——你正在使用 VB 为你编写完全多余的 Javascript，而你可以使用 VB 来获取你需要的东西，然后让 Javascript 完成你需要处理数据的工作.
But don't do this -- you're using VB to write totally redundant Javascript for you, when you could be using VB to fetch what you need, and then let Javascript do the work that you need done with the data.
更好的方法来做你想做的事情是重写你的VB来创建一个Javascript对象数组，每个对象都包含一个公园的信息.然后使用 Javascript 循环遍历该数组并为您设置标记及其关联的 infoWindows.
The better way to do what you are trying to do is to rewrite your VB to create an array of Javascript objects, each one containing a park's information. Then use Javascript to loop over that array and set up the markers and their associated infoWindows for you.
概述建议的解决方案:
// Create an array to hold a series of generic objects
// Each one will represent an individual marker, and contain all the
// information we need for that marker. This way, we can reuse the data
// on the client-side in other scripts as well.
var locations_array = [<%
While (
(Repeat1__numRows <> 0)
AND (NOT locations_haslatlong.EOF)
)
%>
{
latitude: <%=(locations_haslatlong.Fields.Item("llat").Value)%>,
longitude: <%=(locations_haslatlong.Fields.Item("llong").Value)%>,
title: "<%=(locations_haslatlong.Fields.Item("ldescription").Value)%>",
infoWindowContent: "<%=(locations_haslatlong.Fields.Item("field_or_fields_containing_data_for_info_window").Value)%>"
},
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
locations_haslatlong.MoveNext()
Wend
%>];
var x = locations_array.length;
while (--x) {
// Grab an individual park object out of our array
var _park = locations_array[x]
var myLatlng = new google.maps.LatLng(_park.latitude,_park.longitude);
var marker = new google.maps.Marker({
map: map,
position: myLatlng,
title: _park.title,
icon: 'http://google-maps-icons.googlecode.com/files/park.png',
clickable: true,
});
var infowindow = new google.maps.InfoWindow({
content: _park.infoWindowContent
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
这篇关于使用自己的信息窗口在地图上显示多个标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
