在Maui Blazor应用中集成Leaflet地图时遇initMap未定义错误

问题核心 #

出现Could not find 'initMap' ('initMap' was undefined)错误，本质是Blazor无法访问到全局作用域下的initMap函数，通常由脚本路径错误或脚本未正确加载导致。

修复步骤 #

1. 确认静态资源位置 #

确保leaflet-map.js文件放在项目的wwwroot目录下（MAUI Blazor的静态资源根目录），如果放在子文件夹（如wwwroot/js），后续路径要对应调整。

2. 修正脚本引用路径 #

在index.html中，将脚本引用的~/leaflet-map.js改为根目录开头的绝对路径：

<!-- 若文件在wwwroot根目录 -->
<script src="/leaflet-map.js"></script>

<!-- 若文件在wwwroot/js目录 -->
<script src="/js/leaflet-map.js"></script>

~/在MAUI Blazor的WebView环境中无法正确解析，使用绝对路径能确保脚本被正确加载。

3. 确保函数处于全局作用域 #

检查leaflet-map.js中的initMap函数，必须直接暴露在全局作用域，不要包裹在闭包或ES模块中：

function initMap() {
    const map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
    }).addTo(map);
}

如果脚本添加了type="module"属性，函数会被限制在模块作用域内，需删除该属性。

4. 清理缓存并重新构建 #

MAUI项目可能存在缓存问题，执行以下操作：

• 删除项目的bin和obj文件夹
• 重新构建并运行项目

验证方法 #

在index.html的body末尾添加测试代码，确认脚本加载状态：

<body>
    <!-- 现有页面内容 -->
    <script>
        console.log('initMap:', initMap);
    </script>
</body>

打开浏览器开发者工具的控制台，若能看到initMap: function initMap()，说明脚本已正确加载。

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