开发环境

uniapp开发iOS App项目

使用的库

"mapbox-gl": "^3.8.0"

主要的页面代码

这里可以直接使用HBuilderX生成的项目代码，新建一个vue3的项目即可

安装依赖

npm install mapbox-gl

进入页面代码为：

<template>
<view class="content">
<image class="logo" src="/static/logo.png" @click="toMapbox"></image>
</view>
</template>

<script setup>
const toMapbox = () => {
uni.navigateTo({
url: "/pages/mapbox/index",
})
}
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
</style>

地图页面代码

<template>
<view class="map-wrap">
<view id="map-box"></view>
</view>
</template>

<script>
import "mapbox-gl/dist/mapbox-gl.css"
</script>

<script module="mapbox" lang="renderjs">
import mapboxgl from "mapbox-gl"

export default {
data() {
return {
accessToken: "XXX",
}
},
mounted(){
this.initMap()
},
methods: {
initMap() {
mapboxgl.accessToken = this.accessToken
const map = new mapboxgl.Map({
container: "map-box",
style: "mapbox://styles/mapbox/streets-v12",
projection: "globe",
zoom: 12,
center: [120, 32],
minZoom: 1,
})
}
},
}
</script>

<style lang="scss" scoped>
.map-wrap {
position: relative;
width: 100vw;
height: 100vh;
}

map-box {

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>

由于隐私关系，这里的accessToken需要去mapbox的官网注册获取。

查看是否将地图页面添加进入到路由中:

"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path" : "pages/mapbox/index",
"style" :
{
"navigationBarTitleText" : "地图"
}
}
],

手机调试

运行项目到iOS中，点击logo会跳到地图页面，进入页面的时候会出现三秒左右的白屏时间，一直得不到解决的办法。

预期的效果就是想要加载得快一点