app中使用mapbox地图

由于mapbox中大量操作dom元素，不能直接在uni-app中直接使用，会报错误，所以必须使用uni-app提供的render.js模式。

使用前请先下载mapbox-gl的npm库，如果不想下载库，那么就引入mapbox官方提供的cdn链接，实现动态导入js，css，动态导入也是uni-app建议的一种方法，不会使得打包体积过大，此文暂时只展示如何使用npm包。

记得自己在mapbox官网申请access token。

具体操作和代码：

在uni-app项目的根目录下使用npm下载mapbox-gl

npm install --save mapbox-gl

在项目中创建一个map页面，页面代码如下： <template> <view> <!-- #ifdef APP-PLUS || H5 --> <view> <!-- 这里是mapbox的地图容器 --> </view> <!-- #endif --> </view> </template>

//renderjs 模式
<script module="mapbox" lang="renderjs">
//此处下载的是mapbox2.x版本，引入方式要按照此处书写
const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//如果是1.x版本，按照下面方式书写（少了一个 '!'）
//const mapboxgl = require('!mapbox-gl/dist/mapbox-gl.js');
//css也可以在下方的scss中导入，不做强求
import 'mapbox-gl/dist/mapbox-gl.css';

//let map = null //地图实例 export default { data:{ return(){ map: null //地图实例 } }, mounted() { this.createdMap() }, methods: { createdMap() { //创建地图 mapboxgl.accessToken = '填写你自己申请到的token'; map = new mapboxgl.Map({ container: 'map-box', // container ID style: 'mapbox://styles/mapbox/light-v9', // style URL center: [118.810251,32.062151], // starting position [lng, lat] zoom: 9 // starting zoom }); map.on("load", function() { //加载地图时触发 console.log('load') }); }, } }

</script>

<style lang="scss">

.map-wrap { position: relative; min-width: 100vw; min-height: 100vh; } #map-box { top: 0; left: 0; bottom: 0; right: 0; position: absolute; } #map-box /deep/ .mapboxgl-ctrl-geocoder { min-width: 140px; } #map-box /deep/ .mapboxgl-ctrl-geocoder input[type="text"] { height: 30px; } #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-icon-search { top: 5px; } #map-box /deep/ .mapboxgl-ctrl-geocoder .geocoder-pin-right * { top: 5px; } .control-box { padding: 10rpx 30rpx; background-color: #00AAFF; position: absolute; right: 0; top: 0; z-index: 999px; }

</style>

后面再写如何点击按钮控制地图交互和事件的绑定。 【好难用的markdown。。。】 https://blog.csdn.net/Hello_yihao/article/details/116055805