在Razor foreach循环中使用OpenStreetMap标记搜索结果

首先得说清楚你报错的原因：你直接在Razor的@foreach里写L.marker，服务器端的Razor引擎会把L当成C#的变量来解析，但你根本没在C#代码里定义过L，所以才会报“名称L在当前上下文中不存在”的错误。L是Leaflet库提供的前端全局对象，必须放在前端<script>标签里执行，不能让服务器端代码去解析它。

下面给你两种靠谱的实现方式：

方式一：Razor循环直接输出JS代码 #

这种方式适合简单场景，直接在<script>里用Razor循环生成每个标记的JS代码：

<!-- 先确保Leaflet的CSS和JS已经正确引入页面，比如： -->
<!-- <link rel="stylesheet" href="你的Leaflet CSS路径"> -->
<!-- <script src="你的Leaflet JS路径"></script> -->

<div id="map" style="height: 400px;"></div>

<script>
    // 先初始化地图（这一步不能少）
    var map = L.map('map').setView([39.616886,-86.310997], 12);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    <!-- 用Razor循环生成标记代码 -->
    @foreach (var u in Model.listschools)
    {
        // @: 告诉Razor后面的内容是要输出到前端的JS代码
        @:L.marker([@u.lat, @u.longt]).addTo(map).bindPopup('@Html.Raw(u.instnm)').openPopup();
    }
</script>

这里@Html.Raw(u.instnm)是为了处理机构名称里的特殊字符（比如单引号、HTML标签），避免JS语法报错。

方式二：先转JS数组再用前端forEach循环（更推荐） #

这种方式把服务器端数据转成前端JS数组，再用JS原生的forEach处理，代码更清晰，也分离了服务器端和前端逻辑：

<div id="map" style="height: 400px;"></div>

<script>
    // 初始化地图
    var map = L.map('map').setView([39.616886,-86.310997], 12);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    // 把服务器端的学校列表转成JS数组
    var schoolList = @Html.Raw(Json.Serialize(Model.listschools));

    // 前端forEach循环添加标记
    schoolList.forEach(function(school) {
        L.marker([school.lat, school.longt])
          .addTo(map)
          .bindPopup(school.instnm)
          .openPopup();
    });
</script>

额外注意点： #

1. 必须确保Leaflet的CSS和JS文件已经正确加载到页面，不然前端也会找不到L对象；
2. 确认Model.listschools里的lat和longt是有效的数字类型，否则JS会把它们当成字符串处理，导致标记位置错误；
3. 如果机构名称里有特殊字符（比如双引号、换行），Json.Serialize会自动处理，比手动拼接字符串更安全。

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