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

我需要在地图上显示多个标记，每个标记都有自己的 信息窗口。我已经毫无问题地创建了单独的标记， 但不知道如何为每个创建信息窗口。

我正在基于 ASP 的网站中使用 V3 API 生成地图， 从一组数据库记录创建标记。标记是 通过循环 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'
            });

这将在正确的位置创建所有相关标记。

我现在需要做的，并且不确定如何实现是给每个 其中有自己独特的信息窗口，我可以用它来显示 与该标记相关的信息和链接。

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


                                    });

问题出在你的电话上addListener()

当您循环遍历记录集并一次又一次地编写 JavaScript 以将标记添加到地图时，您只调用事件侦听器一次。此外，您实际上从未创建过任何对象信息窗口输入，这样你就没有任何东西可以调用open() on.

The 又快又脏解决方案是在创建后添加它marker但在你结束之前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 完成您需要处理数据的工作。

The better做你想做的事情的方法是重写你的VB来创建一个Javascript对象数组，每个对象都包含一个公园的信息。然后使用 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);
    });
}