javascript - 通过 ClientScriptManager 进行事件监听器以进行 map 服务器端脚本编写

Question

我在使用标记的事件监听器时遇到问题， 在这里，我已在服务器端使用 LINQ 成功填充了 map

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

CSM

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

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

我尝试将监听器 block 移出 foreach 组，但发生了同样的事情，并且只能单击最后一个标记。

这是 map 的 html

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

Answer 1

它只将点击函数附加到最后一个标记，因为您在后面的代码中循环生成标记，而不是 JavaScript。对于循环中的每一项，您都会创建相同的 var 标记，因此从 JavaScript 的 Angular 来看， map 上只有一个标记可以附加函数。

您必须确保每个lat_lng和标记都有唯一的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++;
}

更好的是创建 map 坐标的 javascript 数组并在客户端执行循环。看看这个SO answer 。它有一个 JavaScript 数组。例如，您可以在代码后面创建该数组作为字符串，并将其写入 Literal。

更新

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

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>