快捷導(dǎo)航

uni-app使用瓦片實現(xiàn)離線地圖的2種方案示例代碼

更新時間：2026年02月12日 09:46:39 作者：李劍一

uni-app是一個前端框架,開發(fā)者編寫一套代碼即可發(fā)布到各大主流平臺,從而實現(xiàn)了程序跨平臺使用,這篇文章主要介紹了uni-app使用瓦片實現(xiàn)離線地圖的2種方案,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近接到一個安卓App的活兒，雖然功能上不算復(fù)雜，但因為原本沒怎么做過安卓端，所以也是"摸著石頭過河"。簡單寫一下踩過的坑和淌的水吧~

uni-app實現(xiàn)離線地圖主要用 leafletjs 實現(xiàn)，但是因為在安卓端運行，存在渲染問題，所以還要用上 renderjs。

實現(xiàn)方案一：web-view

因為uni-app引入第三方可以采用傳統(tǒng)的 NPM 安裝的方式，也可以采用引入打包完的js文件的方式。

這里采用 leafletjs 打包完的文件，將 leafletjs 放入 static 文件夾內(nèi)。

在網(wǎng)上下載了公開的瓦片地圖圖片，以 {z}/{x}/{y} 的目錄結(jié)構(gòu)放入 tiles 文件夾中，將 tiles 放入 static 文件夾內(nèi)。

在static文件夾下新建一個 offline-map.html 文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>離線地圖</title>
		<link rel="stylesheet" href="./leaflet/leaflet.css" rel="external nofollow"  />
		<style>
			html,
			body {
				margin: 0;
				padding: 0;
			}

			#map {
				height: 100vh;
				width: 100vw;
				margin: 0;
				padding: 0;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<script src="./leaflet/leaflet.js"></script>
		<script>
			const baseUrl = './tiles/{z}/{x}/{y}.jpg';
			const map = L.map('map').setView([23.56, 113.23], 15);

			L.tileLayer(baseUrl, {
				minZoom: 15,
				maxZoom: 18,
				tms: true,
				attribution: 'Offline Tiles',
				errorTileUrl: ''
			}).addTo(map);
		</script>
	</body>
</html>

找到 pages/index/index.vue 文件，采用 web-view 引用的方式引入上述 html 文件。

// pages/index/index.vue
<template>
	<view class="content">
		<web-view src="/static/offline-map.html"></web-view>
	</view>
</template>

<style>
	.content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

實現(xiàn)方案二：renderjs

仍然將 leafletjs 和 瓦片圖片文件夾tiles 放入 static 文件夾中。

// pages/index/index.vue
<view class="content">
    <view id="map" class="map-container"></view>
</view>

<script module="leaflet" lang="renderjs">
    import '@/static/leaflet/leaflet.css';
	import * as L from "@/static/leaflet/leaflet.js";

    export default {
		mounted() {
			this.initMap();
		},
		methods: {
			initMap() {
				const baseUrl = 'static/tiles/{z}/{x}/{y}.jpg'
				map = L.map('map').setView([23.56, 113.23], 15);

				L.tileLayer(baseUrl, {
					minZoom: 15,
					maxZoom: 18,
					tms: true,
					attribution: 'Offline Tiles',
					errorTileUrl: ''
				}).addTo(map);
			},
        }
    }
</script>

這里需要注意的是一定要在 renderjs 中實現(xiàn)上述代碼，如果在常規(guī) script 中實現(xiàn)，在 H5端 沒有任何問題，但是運行到真機上會白屏。（這個問題我反復(fù)試了好幾次都不行，結(jié)果還是上傳到 Trae 上解決了這個問題）。

導(dǎo)致這種情況的原因是在常規(guī) sctipt 中的代碼，在真機上是運行在 邏輯層 的代碼，無法干擾到 視圖層 的結(jié)構(gòu)，這一點和Web是不同的。

而 renderjs 是運行在 視圖層 的js，具備操作 DOM 的能力。

其次是引用 static 文件的路徑，import static 中的文件可以使用 @/static 的方式，但是在代碼中引用 static 文件需要采用 static/ 的形式。