通过 ClientScriptManager 进行映射服务器端脚本的事件侦听器

Question

我在标记的事件侦听器上遇到问题，在这里，我已经在服务器端使用 LINQ 成功填充了地图

var x = from a in db.project_profiles
        select new
        {
             a.project_gis_latitude,
             a.project_gis_longitude,
             a.project_title
        };

中南

    string csName = "MapScript";
            Type csType = this.GetType();
            ClientScriptManager csm = Page.ClientScript;
             if (!csm.IsStartupScriptRegistered(csType, csName))
            {
                StringBuilder sb = new StringBuilder();
and this is the entire string for the map
    sb.Append("  <script> ");
                     sb.Append(" var myLatLng = {lat: 8.2784189, lng: 125.5922004}; ");
                     //sb.Append("alert(myLatLng.lat);");
                     sb.Append("    var markers = [];");
                 sb.Append(" function initMap() { ");
                           sb.Append("  var map = new google.maps.Map(document.getElementById('dvMap'), { ");
                           sb.Append("   zoom: 7, ");
                           sb.Append("   center: myLatLng ");
                           sb.Append("   }); ");
                            foreach (var z in x)
                            {
                                    //sb.Append("alert('"+z.project_title+"');");
                                    sb.Append("     var lat_lng = new google.maps.LatLng(" + z.project_gis_latitude + ", "+z.project_gis_longitude+");       ");
                                    sb.Append("     var marker = new google.maps.Marker({     ");
                                    sb.Append("     position: lat_lng,     ");
                                    sb.Append("     map: map,     ");
                                    sb.Append("     title: '"+z.project_title+"',   ");
                                    sb.Append("     label: '" + z.project_title.Substring(0,1) + "'   ");
                                    sb.Append("     });   "); 

                                    sb.Append("     marker.addListener('click', function() {   ");
                                    sb.Append("     map.setZoom(10);   ");
                                    sb.Append("     map.setCenter(marker.getPosition());   ");
                                    sb.Append("    });   ");
                            };
                                    //sb.Append("alert('End');");
                  sb.Append("   } ");
                  sb.Append("initMap();");
              sb.Append("  </script> ");

剧本到此结束

csm.RegisterStartupScript(csType, csName, sb.ToString());

运行时没有错误并且出现了所有标记，但侦听器仅响应加载的最后一个标记，我希望所有标记都具有侦听器而不仅仅是一个，以便我可以在单击时检索它们的标题。

我试图将侦听器块移出foreach组，但发生了同样的事情，只能单击最后一个标记。

这是地图的 HTML

<div id="dvMap"></div>

Answer 1

它只将单击函数附加到最后一个标记，因为您在代码中循环生成标记，而不是 javascript。对于循环中的每个项目，您都创建相同的var marker，因此从JavaScript的角度来看，映射上只有一个标记可以附加函数。

您必须确保每个lat_lng和marker都有一个唯一的ID。

int counter = 0;
foreach (var z in x)
{
    //sb.Append("alert('"+z.project_title+"');");
    sb.Append("     var lat_lng" + counter + " = new google.maps.LatLng(" + z.project_gis_latitude + ", " + z.project_gis_longitude + ");       ");
    sb.Append("     var marker" + counter + " = new google.maps.Marker({     ");
    sb.Append("     position: lat_lng" + counter + ",     ");
    sb.Append("     map: map,     ");
    sb.Append("     title: '" + z.project_title + "',   ");
    sb.Append("     label: '" + z.project_title.Substring(0, 1) + "'   ");
    sb.Append("     });   ");

    sb.Append("     marker" + counter + ".addListener('click', function() {   ");
    sb.Append("     map.setZoom(10);   ");
    sb.Append("     map.setCenter(marker" + counter + ".getPosition());   ");
    sb.Append("    });   ");
    counter++;
}

更好的方法是创建一个映射坐标的javascript数组并执行循环客户端。看看这个SO答案。它有一个JavaScript数组。例如，您可以在代码隐藏中创建该数组作为字符串，并将其写入Literal。

更新

更好的是将仅包含地图坐标的字符串发送到页面，并在客户端循环该位置数组。

public string javaScriptLocations = string.Empty;
protected void Page_Load(object sender, EventArgs e)
{
    StringBuilder sb = new StringBuilder();
    sb.Append("var locations = [");
    for (int i = 0; i < x.Count; i++)
    {
        sb.Append("['Location " + i + "', " + z.project_gis_latitude + "," + z.project_gis_longitude + ", " + i + "],");
    }
    javaScriptLocations = sb.ToString().TrimEnd(',') + "];";
}

ASPX 页

<script type="text/javascript">
    <%= javaScriptLocations %>
    //map stuff
</script>