Question

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

class Sample {
     private String foo;
     private String bar;

     private Map<String, Map<String, Object>> data = new LinkedHashMap<>();

     @JsonAnyGetter
     public Map<String, Map<String, Object>> getData() {
          return data;
     }

     @JsonAnySetter
     public void set(String key, Map<String, Object>) {
          data.put(key, object);
     }
}

CSM

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

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

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

这是地图的html

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

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>

通过ClientScriptManager的事件侦听器，用于映射服务器端脚本

1 个答案: