在地图上显示多个标记用自己的信息窗口 [英] Display multiple markers on a map with their own info windows
问题描述
我需要在地图上显示多个标记，每个都有自己的
信息窗口。我创建了个人标志没有问题，
但不知道如何创建信息窗口的每个。
我使用的是基于ASP的网站内的V3 API生成地图，
从一组数据块的记录被创建标记。该标记是
通过经由RS与循环并限定一个标记（）中创建
相关变量：
VAR myLatlng =新google.maps.LatLng（纬度，经度）;
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：myLatlng，
标题：LOCATIONNAME'，
图标：HTTP：//google-maps-icons.google$c$c.com/files/park.png'
}）;
这是在正确的位置创建所有相关的标记。
我现在需要做的，我不知道如何实现的是给每个
他们自己独特的信息窗口，我可以用它来显示
信息和相关链接到该标记。
源代码
＆LT;脚本类型=文/ JavaScript的SRC =http://maps.google.com/maps/api/js?sensor=false＆GT;＆LT; /脚本＆GT;
＆LT; SCRIPT LANGUAGE =JavaScript的＆GT;
$（文件）。就绪（函数（）{ //谷歌地图
VAR myOptions = {
变焦：5，
中心：新google.maps.LatLng（-26.66，122.25），
MapTypeControl中：假的，
mapTypeId设为：google.maps.MapTypeId.ROADMAP，
navigationControl：真实，
navigationControlOptions：{
风格：google.maps.NavigationControlStyle.SMALL
} } VAR地图=新google.maps.Map（的document.getElementById（map_canvas的），myOptions）; ＆LT;！ - 虽然locations_haslatlong不BOF.EOF - ＆GT;
＆LT;％，而（（Repeat1__numRows＆LT;＆GT; 0）和（非locations_haslatlong.EOF））％GT;
VAR myLatlng =新google.maps.LatLng(<%=(locations_haslatlong.Fields.Item(\"llat\").Value)%>,<%=(locations_haslatlong.Fields.Item(\"llong\").Value)%>);
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：myLatlng，
标题：'＆LT;％=（locations_haslatlong.Fields.Item（ldescription）值。）％GT;，
图标：HTTP：//google-maps-icons.google$c$c.com/files/park.png'，
点击：真实，
}）;
＆LT;％
Repeat1__index = Repeat1__index + 1
Repeat1__numRows = Repeat1__numRows-1
locations_haslatlong.MoveNext（）
WEND
％GT;
＆所述;！ - 结束虽然locations_haslatlong不BOF.EOF - ＆GT; google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）; google.maps.event.addListener（标记'DBLCLICK'，函数（）{
map.setZoom（14）;
}）;
}）;
问题是在调用的addListener（）
虽然通过你记录你循环，再而三，再而写出来的JavaScript添加标记到地图上，你只调用事件监听器一次。此外，你从来没有真正建立的open（）在
在快速和肮脏解决方案后，您创建标记但是你最终可以在你的在<添加此/ code>循环。
VAR信息窗口=新google.maps.InfoWindow（{
内容： '<%=(locations_haslatlong.Fields.Item(\"field_or_fields_containing_data_for_info_window\").Value)%>'
}）;
google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）;
但不这样做 - 你用VB写的完全冗余的JavaScript你，当你可以用VB获取你需要什么，然后让Java脚本做到这一点，你需要与数据所做的工作
在更好的方式做你正在尝试做的是重新编写VB创建JavaScript对象的数组，每个包含园区内的信息。然后使用JavaScript来遍历数组，并设置标志和相关信息窗口为您服务。
大纲所提出的解决方案：
//创建一个数组举办一系列的通用对象
//每个人会重新present个人标记，包含所有的
//我们需要为标记信息。通过这种方式，我们可以重用的数据
//在其他脚本中的客户端也是如此。
变种locations_array =并[d％
虽然（
（Repeat1__numRows＆所述;＆0）
AND（NOT locations_haslatlong.EOF）
）
％GT;
{
纬度：其中;％=（locations_haslatlong.Fields.Item（llat）值。）％＆gt;中
经度：其中;％=（locations_haslatlong.Fields.Item（llong）值。）％＆gt;中
标题：＆LT;％=（locations_haslatlong.Fields.Item（ldescription。）值）％GT;，
infoWindowContent： \"<%=(locations_haslatlong.Fields.Item(\"field_or_fields_containing_data_for_info_window\").Value)%>\"
}，
＆LT;％
Repeat1__index = Repeat1__index + 1
Repeat1__numRows = Repeat1__numRows-1
locations_haslatlong.MoveNext（）
WEND
％GT;]VAR X = locations_array.length;
而（--x）{
//取得一个单独的公园对象我们阵
变种_park = locations_array [X]
VAR myLatlng =新google.maps.LatLng（_park.latitude，_park.longitude）;
VAR的标记=新google.maps.Marker（{
地图：地图，
位置：myLatlng，
标题：_park.title，
图标：HTTP：//google-maps-icons.google$c$c.com/files/park.png'，
点击：真实，
}）;
VAR信息窗口=新google.maps.InfoWindow（{
内容：_park.infoWindowContent
}）;
google.maps.event.addListener（标记，'点击'，功能（）{
infowindow.open（地图，标记）;
}）;
}
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.
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.
Source
<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);
});
});
The problem is in your call to addListener()
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.
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);
});
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.
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.
Outlining the proposed solution:
// 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屋！
