uni-app中使用mapbox地图

本文分享在uni-app中如何使用mapbox地图，先了解下注意事项：

1. 由于mapbox中大量操作dom元素，不能直接在uni-app中直接使用，会报错误，所以必须使用uni-app提供的render.js模式。
2. 使用前请先下载mapbox-gl的npm库，如果不想下载库，那么就引入mapbox官方提供的cdn链接，实现动态导入js，css，动态导入也是uni-app建议的一种方法，不会使得打包体积过大，此文暂时只展示如何使用npm包。
3. 记得自己在mapbox官网申请access token。

具体操作和代码：

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

npm install --save mapbox-gl  

1. 在项目中创建一个map页面，页面代码如下：

   
   <template>  
   <view class="map-wrap">  
       <!-- #ifdef APP-PLUS || H5 -->  
       <view id="map-box">  
       <!-- 这里是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