如何在JavaScript中使用ASP.NET控制器的经纬度数组动态生成地图标记？

我来帮你搞定这个问题！核心思路就是把服务器端C#的位置数据序列化为JSON格式，让客户端JavaScript可以直接读取和使用。下面是具体的实现步骤和代码示例：

第一步：确保控制器返回正确的模型数据 #

首先，建议你定义一个强类型的位置类（当然用dynamic也可以，但强类型更安全），然后在控制器中准备好包含纬度和经度的数据集：

// 定义位置模型类
public class Location
{
    public double Lat { get; set; }
    public double Lng { get; set; }
    // 你还可以添加其他属性，比如地点名称等
}

// 控制器Action
public ActionResult Mapa()
{
    // 这里替换成你从数据库或其他数据源获取的真实数据
    var locations = new List<Location>
    {
        new Location { Lat = 40.7128, Lng = -74.0060 }, // 纽约
        new Location { Lat = 34.0522, Lng = -118.2437 }  // 洛杉矶
    };
    
    return View(locations);
}

第二步：修改视图代码，传递数据到JavaScript #

在你的视图中，我们需要把服务器端的模型数据转换成JavaScript能识别的数组，然后遍历数组创建地图标记：

@model IEnumerable<Location> <!-- 如果用强类型模型，替换原来的dynamic -->
@{ ViewBag.Title = "Mapa"; }

<style>
#map { height: 400px; width: 100%; }
</style>

<h3>My Google Maps Demo</h3>
<div id="map"></div>

<script>
function initMap() {
    // 关键步骤：把服务器端模型序列化为JSON，转成JS数组
    var locations = @Html.Raw(Json.Encode(Model));
    
    // 初始化地图，设置默认中心点和缩放级别
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 4,
        center: { lat: 39.8283, lng: -98.5795 } // 美国中心位置，可根据你的数据调整
    });
    
    // 遍历所有位置，创建地图标记
    locations.forEach(function(location) {
        new google.maps.Marker({
            position: { lat: location.Lat, lng: location.Lng },
            map: map,
            title: 'Location' // 可以改成从模型获取的地点名称，比如location.Name
        });
    });
}
</script>

<!-- 引入Google Maps脚本，替换YOUR_API_KEY为你的实际API密钥 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

关键细节说明： #

• @Html.Raw(Json.Encode(Model))：Json.Encode会把C#对象序列化为JSON字符串，@Html.Raw避免ASP.NET自动对字符串进行HTML编码，这样JavaScript才能正确解析成数组。
• 如果你的模型还是用dynamic，只需要把@model IEnumerable<Location>改回@model IEnumerable<dynamic>即可，只要每个dynamic对象都包含Lat和Lng属性就没问题。
• 记得替换Google Maps脚本中的YOUR_API_KEY为你自己的API密钥，否则地图无法正常加载。

如果你不想用强类型模型，也可以通过ViewBag传递数据：
在控制器中添加ViewBag.Locations = locations;，然后视图中把var locations = @Html.Raw(Json.Encode(Model));改成var locations = @Html.Raw(Json.Encode(ViewBag.Locations));，效果是一样的。

内容的提问来源于stack exchange，提问作者Vitor Nicacio