Question

我正在使用Sql Server 2008在asp.net中使用谷歌地图。我有相同纬度和经度的多条记录。我想显示一个引脚而不是显示太多引脚，而是在引脚上方的信息框中显示来自这些多个记录的内容。

这是我的Javascript代码：

window.onload = function () {
        var infoWindow = new google.maps.InfoWindow();
        var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
        for (i = 0; i < markers.length; i++) {
            var data = markers[i]
            var myLatlng = new google.maps.LatLng(data.lat, data.lng);
            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: 'marker.png',
                title: data.title,
                animation: google.maps.Animation.DROP
            });
            (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    infoWindow.setContent('<div style="width:250px;height:80px;background:red">' + data.description + '</div>');
                    infoWindow.open(map, marker);
                });
            })(marker, data);
        }
    }

这是Asp.NET代码：

var markers = [
    <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
                {
                "title": '<%# Eval("Component") %>',
                "lat": '<%# Eval("Latitude") %>',
                "lng": '<%# Eval("Longitude") %>',
                "description": '<%# Eval("Component") %>'+" "+'<%# Eval("Project_No") %>'
            }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
    ];

    protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                DataTable dt = this.GetData("graphrepresentation");

                rptMarkers.DataSource = dt;
                rptMarkers.DataBind();
            }
        }
            private DataTable GetData(string query)
            {
                    string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
                    SqlCommand cmd = new SqlCommand(query);
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.AddWithValue("year",0);
                    using (SqlConnection con = new SqlConnection(conString))
                    {
                        using (SqlDataAdapter sda = new SqlDataAdapter())
                        {
                                cmd.Connection = con;
                                sda.SelectCommand = cmd;
                                using (DataTable dt = new DataTable())
                                {
                                    sda.Fill(dt);
                                    return dt;
                                }
                        }
                    }

            }

Answer 1

当你在标记上循环时，将每个标记存储在一个数组中。

在创建每个标记之前，请检查数组以确保在这些坐标处还没有标记。

如果有，请更新阵列中标记的描述（或添加新值）以包含此重复位置的描述。

PS，这不是＆＃39; Javascript代码＆＃39; ：<asp:Repeater ID="rptMarkers" runat="server">

Answer 2

所以，我刚刚将以下内容添加到我的脚本中，它可以正常工作。

var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
    googleSingleMarkers={};
    for (i = 0; i < markers.length; i++){
        (function (data) {
            var myLatlng  = new google.maps.LatLng(data.lat,data.lng);
            hash      = myLatlng.toUrlValue();
            infoContent = '<div>'  + data.description + '</div>';
            if(typeof googleSingleMarkers[hash]==='undefined'){
                googleSingleMarkers[hash] = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    icon: 'marker.png',
                    description:data.description,
                    infoContent:infoContent,
                    animation: google.maps.Animation.DROP
            });
            google.maps.event.addListener(googleSingleMarkers[hash], "click", 
            function (e) {                  
                infoWindow.setContent(this.get('infoContent'));            
                infoWindow.open(map, this);
            });
            }else{
                googleSingleMarkers[hash].infoContent+=infoContent;
            }
    })(markers[i]);
    }

通过Asp.net在谷歌地图中的一个信息框中组合多个标记的内容

2 个答案: