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

2. 在项目中创建一个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>

后面再写如何点击按钮控制地图交互和事件的绑定。

我们接着讲如何通过地图组件外的按钮来和地图做事件的交互，我们展示一个最简单的案例，如下图，当我点击‘获取经纬度’按钮，我们能够获取到当前点的坐标，拿获取到的坐标传给其他页面。
首先我们在代码里面添加这个按钮

   <view class="map-wrap">
		<!-- 这里是地图页面 -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view id="map-box">
		</view>
		<!-- #endif -->
		<view class="btn">		
			<!-- 样式大家自己写，用定位就可以了 -->			
			获取经纬度
		</view>
	</view>

这里说明一下，randerjs里面无法使用uni系列方法或者函数，例如uni.navigateBack()等等，但是可以使用plus系列函数，例如：plus.nativeUI.showWaiting(’’);等，另外我在renderjs里面使用vuex也是无法使用，具体还没找到不能使用的原因。既然无法使用uni系列事件，那么我们就另辟蹊径，我们当前页面里面再写一个js，如下图：
在这个不属于renderjs的代码区域，我们可以使用所有的uni系列函数和自己定义的请求代码，vuex等等，注意：render中要引用其他的请求函数，我这里就引入了axios.js

下面我们接着说，如果给renderjs中传递参数，例如我们在上一个页面中传入了一个用户信息，我们需要在当前页面接收并使用这个用户信息，首先我们需要在onLoad函数中接收参数，看代码

export default {		
		data() {
			return {
				option: {
				}
			}
		},		
		onLoad(option) {		
			//这里就是从上个页面过来接收到的参数	
			this.option = option;
		}		
	}

继续我们将这个参数传递给renderjs中，这时候就需要在元素中操作了

<template>
	<view class="map-wrap">
		<!-- 这里是地图页面 -->
		<!-- #ifdef APP-PLUS || H5 -->
		<view id="map-box" :prop="option" :change:prop="mapbox.test">
		</view>
		<!-- #endif -->
		<view class="btn">			
			获取经纬度
		</view>
	</view>
</template>

我们来解读下代码，：prop=“option” 的意思就是将参数，放在prop里，这样randerjs就能读取到了，同时:change:prop=“mapbox.test” 也必须要写上，“mapbox.test” 中的mapbox代表的是定义renderjs的作用域，这里可以自己定义：

<script module="mapbox" lang="renderjs">

“.test” 代表了renderjs里面的test方法

test(val){
	//此处的val就是代表了逻辑层传过来的数据，也就是拿到了我们需要的option数据信息
	console.log(val)
}

ok,现在其他页面传过来的参数，我们能拿到了，那么接下来就是把renderjs里面的数据返回出去，让其他页面也能拿到，我们在按钮的元素上加点代码

<view class="btn" @click="mapbox.save">			
			获取经纬度
</view>

看代码，我们在按钮上面加了事件，当你点击这个按钮的时候，就是触发renderjs里面的save事件，我们接着看save里面写了什么

	save(event, ownerInstance) { 
		ownerInstance.callMethod('saveEvent', {
			lngLat: 你自己在renderjs的data里面定义的数据
		})
	}

save有两个参数，其中ownerInstance负责调用逻辑层的方法，‘ownerInstance.callMethod’这个方法是官方提供的，里面的 ‘saveEvent’ 是代表具体的方法名称，后面的对象代表要发送的数据，比如这里我发送了个经纬度的数据‘lngLat’，接下来我们在上面script中去写这个方法，记得是在非renderjs中写哟。

methods: {
			saveEvent(options) {				
				console.log(options)
			}
		}

saveEvent方法里面获取到的option就是我们点击按钮执行mapbox.save方法传递过来的参数，现在从其他页面获取参数，我们能获取了，也能把renderjs里面的参数抛出去供其他函数使用了，到此交互算是简单完成了，如有其他好玩的操作，大家可以评论交流哟，谢谢。