使用自己的信息窗口在地图上显示多个标记
我需要在地图上显示多个标记，每个标记都有自己的信息窗口。 我创建了单个标记没有问题，但不知道如何为每个标记创建infowindows。
我在基于ASP的网站中使用V3 API生成地图，标记是从一组DB记录创建的。 通过循环rs并使用相关变量定义marker（）来创建标记：
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' }); 这会在正确的位置创建所有相关标记。
我现在需要做的是，并且不确定如何实现，给每个人提供他们自己独特的信息窗口，我可以使用它来显示与该标记相关的信息和链接。
资源
$(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 ((Repeat1__numRows 0) AND (NOT locations_haslatlong.EOF)) %> var myLatlng = new google.maps.LatLng(,); var marker = new google.maps.Marker({ map: map, position: myLatlng, title: '', icon: 'http://google-maps-icons.googlecode.com/files/park.png', clickable: true, }); 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()东西。
快速而肮脏的解决方案是在创建marker但在结束While循环之前添加此项。
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完成你需要完成的数据工作。
做你想做的更好的方法是重写你的VB来创建一个Javascript对象数组，每个对象包含一个park的信息。 然后使用Javascript循环遍历该数组并为您设置标记及其关联的infoWindows。
概述建议的解决方案：
// 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); }); }
这是有用的东西（RoR / Rails / Ruby on Rails）：
在之前回答的VB / ...代码中存在问题，infowindow对象必须是每个可点击标记唯一的。 演示： http ： //www.geodepollution.org/