如何将C#控制器经纬度列表传递到视图JS生成谷歌地图标记？

首先得提一句：你现在用嵌套foreach遍历纬度和经度列表的方式有问题——这会把每个纬度和每个经度都强行组合一遍，生成完全错误的标记位置。正确的思路是把经纬度一一配对成坐标组，再传递到视图，这样才能精准创建对应位置的标记。

步骤1：控制器中整理经纬度数据 #

推荐用「配对成坐标对象列表」的方式传递，比分开两个独立列表更可靠，也更符合MVC的规范：

方式1：用匿名类型快速组装 #

如果只是临时使用，不需要定义额外类，可以直接用匿名类型：

// 假设你已获取到latitudeList和longitudeList两个列表
var coordinateList = new List<object>();
for (int i = 0; i < latitudeList.Count; i++)
{
    coordinateList.Add(new 
    { 
        Lat = latitudeList[i], 
        Lng = longitudeList[i] 
    });
}
ViewBag.Coordinates = coordinateList;

方式2：定义实体类（更规范易维护） #

如果项目中多次用到地图坐标，建议先创建一个简单的实体类：

public class MapCoordinate
{
    public double Lat { get; set; }
    public double Lng { get; set; }
}

然后在控制器里组装坐标列表：

var coordinateList = new List<MapCoordinate>();
for (int i = 0; i < latitudeList.Count; i++)
{
    coordinateList.Add(new MapCoordinate
    {
        Lat = latitudeList[i],
        Lng = longitudeList[i]
    });
}
// 推荐用ViewModel传递（比ViewBag更类型安全）
return View(coordinateList);

步骤2：视图中遍历坐标创建标记 #

在index.cshtml的Google Map脚本里，遍历配对好的坐标列表，逐个生成标记：

用ViewBag传递的写法 #

<script>
function initMap() {
    // 初始化地图实例（替换成你的容器ID和默认中心点）
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: 39.9042, lng: 116.4074 } // 示例：北京中心点
    });

    // 遍历控制器传递的坐标列表
    @foreach (var coord in ViewBag.Coordinates)
    {
        @:new google.maps.Marker({
        @:    position: { lat: @coord.Lat, lng: @coord.Lng },
        @:    map: map,
        @:    title: "点位" + @coord.Lat + "," + @coord.Lng // 自定义标记标题
        @:});
    }
}
</script>

用ViewModel传递的写法（更推荐） #

如果用ViewModel传递，先在视图顶部声明模型类型：

@model List<你的项目命名空间.MapCoordinate>

<script>
function initMap() {
    const map = new google.maps.Map(document.getElementById("map"), {
        zoom: 12,
        center: { lat: @Model[0].Lat, lng: @Model[0].Lng } // 用第一个坐标做中心点
    });

    @foreach (var coord in Model)
    {
        @:new google.maps.Marker({
        @:    position: { lat: @coord.Lat, lng: @coord.Lng },
        @:    map: map
        @:});
    }
}
</script>

关键注意事项 #

• 确保纬度和经度列表的长度完全一致，避免循环时索引越界
• 谷歌地图的initMap函数要确保在页面加载时被正确触发（比如通过window.onload或者脚本异步加载回调）
• 经纬度建议用double类型，比float精度更高，适配谷歌地图的坐标要求

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