Leaflet 与 ASP .NET MVC 的集成答案

【问题标题】：Leafllet integration with ASP .NET MVCLeaflet 与 ASP .NET MVC 的集成
【发布时间】：2018-11-09 11:42:21
【问题描述】：

我正在尝试在基于 ASP .NET MVC5 的项目中使用 Leaflet (https://leafletjs.com/) javascript 库。

为了简单起见，假设我正在尝试在使用预定义布局 (_Layout.cshtml) 的视图 (Index.cshtml) 上运行以下代码（由本教程提供：https://leafletjs.com/examples/crs-simple/crs-simple.html）：

Index.cshtml

<style>
    #map {
    height: 600px;
}

</style>

<div id="map"></div>

<script>

    var map = L.map('map', {
        crs: L.CRS.Simple,
        minZoom: -5
    });

    var bounds = [[0,0], [1000, 1000]];

    var image = L.imageOverlay('aMap.PNG', bounds).addTo(map);

    map.fitBounds(bounds);

</script>

在布局视图中，我将以下代码放在 HTML 代码的头部，按照这些指南的指示：https://leafletjs.com/download.html

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

但这不起作用，我可以看到即使 Intellisense 也无法识别该库。

我也尝试过下载包，如前所述，我将文件添加到项目中，但考虑到 MVC 项目结构，我将 leaflet.css 文件添加到 Content 文件夹并其余的 js 文件到 Scripts 文件夹。在布局视图中，我添加了：

<link rel="stylesheet" href="~/Content/leaflet.css" />
<script src="~/Scripts/leaflet.js"></script>

现在，Intellisense 可以识别库，但在运行项目时，地图仍然没有显示在视图中。

我是否在这里遗漏了一些明显的东西，也许是进口？如果答案很简单，请多多包涵，但我是使用 .NET 框架和 ASP .NET MVC 结构的初学者，我仍在尝试找出跨过这个框架的方法。

更新

意识到我是从索引视图加载的，所以没有先加载leaflet.js。

我现在可以看到传单地图部分，但 PNG 图像未加载。我相信传单无法找到，所以我应该将图像放在项目结构中的哪个位置？我尝试将它放在 Content and Scripts 文件夹中，但没有成功。

【问题讨论】：

“我的 for 循环立即将 i 设置为最大值。”...您是否使用浏览器工具调试过这个？控制台中的任何错误？您是否已通过浏览器的调试器进行调试？
@ADyson 很抱歉，在我的问题上下文中我不理解您的第一句话。我的控制台中的错误如下：ReferenceError: L is not defined
确实，在您显示的代码中，在尝试对其运行“map”函数之前，您没有定义任何名为L 的变量。这是一个应该由leaflet.js 定义的常量吗？在您尝试运行此代码之前，可能尚未加载 JS 文件。加载页面时检查浏览器的网络工具以查看是否成功加载了leaflet.js（如果加载成功，您将看到该文件的 200 OK 响应）。并确保您在页面的<head> 部分（通常在 MVC 中的布局位中）添加了leaflet.js 的<script 标签，以便在任何其他 JS 运行之前加载它
好吧，我希望如果您将其指定为“aMap.PNG”而没有任何路径，那么它必须与您的视图位于同一文件夹中。如果你想把它放在另一个文件夹中（为了整洁），那么指定一个从你的视图到文件所在位置的相对路径。 URL.Content HTML 帮助器可以帮助解决这个问题 - 在此处查看类似的示例：stackoverflow.com/questions/15986980/…
检查文件名是否完全正确（例如“PNG”而不是“png”）。再次检查网络选项卡，看看是否有请求发出来加载它，以及状态是什么。（一般点 - 如果您发现自己说“它不会工作”或“它不会加载”，这通常是打开调试工具以获取更多详细信息的时候了）

标签： c# asp.net asp.net-mvc leaflet

【解决方案1】：

在@ADyson 的帮助下，我解决了我在更新中已经提到的第一个问题：我直接从索引视图加载，它没有让leaflet.js 先加载。

关于加载图像的问题，我通过分析 GET 方法用于检索图像的路径找到了放置它的正确路径，该路径仅位于项目的主文件夹以及 Contents、Models 等其他文件夹中等。

【讨论】：