通过 ClientScriptManager 的事件监听器用于地图服务器端脚本

Question

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

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

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

我试图将侦听器块移出 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 answer。它有一个 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>