本文最后更新于 2025-03-25，文章超过7天没更新，应该是已完结了~

背景：在开发app项目时，需要做一个地图展示船舶与风场的功能，离线地图资源来自服务器，pc端实现地图展示直接引用服务器地图资源就行，app开发时开始也是直接引用，然后地图里的功能在vue文件里实现。

问题：运行在内置浏览器的时候没有问题，结果一真机调试地图直接白屏了，一直报错L is not defined。

考虑到可能是离线资源Leaflet.js 加载问题，尝试了很多方式加载，比如使用异步加载、动态加载Leaflet.js，并在其onload回调中执行地图初始化代码，确保L已定义。结果是都没有效果。

解决：最后考虑到可能是uni-app框架的模块化机制对全局变量L的影响。在uniapp上将地图相关的HTML、CSS和JavaScript全部写在一个单独的HTML文件中，然后通过web-view组件引用该文件。这样，Leaflet.js在该HTML文件中以传统的方式引入，确保在脚本加载完成后才执行地图初始化代码，避免了异步加载导致的问题。

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>安全管控</title>

		<script src="http://39.171.87.62:8181/mymap/js/jquery-3.3.1.min.js"></script>

		<script src="http://39.171.87.62:8181/mymap/js/leaflet.js"></script>

		<script src="http://39.171.87.62:8181/mymap/js/L.Icon.Pulse.js"></script>

		<script src="http://39.171.87.62:8181/mymap/amap/AMap3.js"></script>

		<script src="http://39.171.87.62:8181/mymap/js/shipxy.js"></script>

		<link rel="stylesheet" href="http://39.171.87.62:8181/mymap/css/leaflet.css" />

		<link rel="stylesheet" href="http://39.171.87.62:8181/mymap/css/L.Icon.Pulse.css" />

		<script src="../js/hybrid_html_uni.webview.1.5.5.js"></script>

		<style>

			html,

			body,

			#container {

				height: 100%;

				width: 100%;

				margin: 0;
			}

		</style>

	</head>

	<body>

		<div id="map-container" style="width: 100%; height: 100%;"></div>

		<script type="text/javascript">

			let baseUrl = ''; // 默认初始化为空

			init();

			function init() {

				ShipXY._map.on('zoomend', mapZoomend);

			}
		</script>
	</body>
</html>

vue文件中使用

<web-view src="../../static/html/map.html" @message="handleMessage" fullscreen="false" style="width: 100%; height: 100%">

分析：使用web-view后地图成功加载。分析有效的原因在于将Leaflet.js和相关逻辑封装在独立的HTML文件中，利用web-view组件创建一个干净的浏览器环境，避免了uni-app框架可能引起的全局变量污染或加载顺序问题。同时，正确的资源路径和本地加载方式确保了真机环境下资源的可靠访问。