javascript - 在来自 C# 对象的 Web 应用程序中的 Google map 上创建多个标记点

Question

我有一个带有 C# 代码的 Web 应用程序，它创建了一个对象列表及其经度和纬度。然后我想使用 Javascript 在 Google map 上为他们创建标记点。我目前有这段代码:

  var marker;
  for (var i = 0; i < ('<%= Buses.Count %>' - 1); i++) {
       marker = new google.maps.Marker({
       position: new google.maps.LatLng('<%= Buses['i'].latitude %>', '<%= Buses['i'].longitude  %>'),
        map: map
       });
  }

这是行不通的，我认为错误在于我引用“i”来说明要使用列表中的哪个对象。

如果我在没有 for 循环的情况下手动设置标记点并将 ['i'] 更改为 [0]，它将很好地放置标记。但是，由于项目数量不断变化并达到 100，我需要使用 for 循环。我尝试删除 i 周围的 '' ，这会生成一条错误消息

"i does not exist in the current context."

我看过这些帖子: Add two marker points in google maps

Google Maps JS API v3 - Simple Multiple Marker Example

Google Maps JS API v3 - Simple Multiple Marker Example

但是，所有这些都使用 JavaScript 内部的位置。我的对象作为自定义对象包含在 C# 代码中，定义为:

public static List<Bus> Buses = new List<Bus>();

这是我的完整 C# 代码: https://pastebin.com/2M1hWjnM

Answer 1

您在代码隐藏/C# 中将 javascript 与数据混合在一起。它不起作用。 首先，您必须将标记数据放在 javascript 数组中。然后让你的 for 没有 webforms 标签 <%%>

把这样的东西放在你的页面代码后面(C#)

public static string getBusesJson()
    {
        var buses = new List<Bus>();

        buses.Add(new Bus() {latitude = 10, longitude = 20 });
        buses.Add(new Bus() { latitude = 15, longitude = 30 });
        buses.Add(new Bus() { latitude = 5, longitude = 40 });

        return JsonConvert.SerializeObject(buses);

    }

把它放在你的 aspx 标题上:

<script type="text/javascript">

    var points = <%= WebApplication3.WebForm1.getBusesJson()%>;

    for (var i = 0; i < points.length; i++) {
        //pass points[i].latitude and points[i].longitude to google maps
    }

</script>