添加Leaflet Navigation插件时出现TypeError报错求助

错误原因 #

你遇到的Uncaught TypeError: L.control.navbar is not a function错误，本质是浏览器未成功加载Leaflet.NavBar插件的JS文件，导致Leaflet命名空间中不存在navbar控件方法。主要问题有两个：

• 路径分隔符错误：网页引用本地文件必须使用正斜杠/，你代码中使用了Windows系统的反斜杠\，浏览器无法正确解析该路径。
• 文件路径不匹配：插件文件的实际存储位置与你编写的src/路径不一致，导致文件加载失败。

解决方案 #

1. 修正路径分隔符 #

将代码中的所有反斜杠替换为正斜杠：

<!-- 修正插件CSS路径 -->
<link rel="stylesheet" href="src/Leaflet.NavBar.css" />
<!-- 修正插件JS路径 -->
<script src="src/Leaflet.NavBar.js"></script>

2. 核对项目文件结构 #

确保你的项目文件结构如下：

项目根目录/
├─ index.html
└─ src/
   ├─ Leaflet.NavBar.css
   └─ Leaflet.NavBar.js

若src文件夹与index.html不在同一层级，需调整路径（例如上级目录用../src/Leaflet.NavBar.js）。

3. 检查文件加载状态 #

打开浏览器开发者工具（F12），切换至Network标签页，刷新页面后查看Leaflet.NavBar.css和Leaflet.NavBar.js的请求状态：

• 若显示404：说明路径错误，重新核对文件位置。
• 若显示200：说明文件加载成功，可尝试更换为插件推荐的Leaflet版本，排查兼容性问题。

4. 尝试CDN加载（可选） #

若本地路径问题难以解决，可使用CDN方式加载插件（自行查找可靠的Leaflet.NavBar插件CDN资源），规避本地路径带来的问题。

修正后的完整代码 #

<!DOCTYPE html>
<html>
  <head>
    <title>St. Andrews United Loyalist Church</title>

    <!-- Leaflet核心CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" />
    <!-- Leaflet.NavBar插件CSS -->
    <link rel="stylesheet" href="src/Leaflet.NavBar.css" />

    <!-- Leaflet核心JS -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
    <!-- Leaflet.NavBar插件JS -->
    <script src="src/Leaflet.NavBar.js"></script>   

    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #mapid { width: 100%; height: 100%}
    </style>
  </head>

  <body>
    <div id="mapid"></div>

    <script>
      var map = L.map('mapid').setView([45.180864, -74.452271], 18);
    
      L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
        attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community'
      }).addTo(map);

      L.control.navbar().addTo(map);
    </script>
  </body>
</html>

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