使用自己的信息窗口在地图上显示多个标记

Question

我需要在地图上显示多个标记,每个标记都有自己的信息窗口.我已经创建了没有问题的单个标记,但不知道如何为每个标记创建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'
            });

这会在正确的位置创建所有相关标记.

我现在需要做的是,并且不确定如何实现,给每个人提供他们自己独特的信息窗口,我可以使用它来显示与该标记相关的信息和链接.

资源

                <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);
                      });


                                    });

Answer 1

问题出在你的电话里 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);
    });
}