uni-app中使用mapbox地图

本文分享在uni-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 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 IDstyle: 'mapbox://styles/mapbox/light-v9', // style URLcenter: [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里面的参数抛出去供其他函数使用了，到此交互算是简单完成了，如有其他好玩的操作，大家可以评论交流哟，谢谢。

uni-app中使用mapbox地图相关推荐

uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uniapp开发app中配置高德地图定位流程
在使用uniapp开发app过程中,如何使用高德地图进行定位高德地图开放平台账号申请进入高德地图开放平台,注册并登陆开发者账号,完成之后点击进入控制台主页在应用管理中点击创建新应用输入并选择你 ...
在iOS中进行Mapbox地图开发杂谈
最近因项目需要,在app中要集成Mapbox,并且要能与苹果地图切换使用.从最早认识Mapbox到最终集成完毕,中间有一些断断续续,但总的时间也不算短了,关于这方面的资料其实是比较少的,能参考的基本都 ...
iOS在APP中调用第三方地图地图（苹果,高德，百度，腾讯）
源码地址https://download.csdn.net/download/liuyinghui523/10801074 1.在app中获得定位权限 <key>NSLocationAlw ...
vue中展示mapbox地图
1,vue中安装mapbox cnpm i mapbox-gl -S 2,main.js中引入 import mapBoxGl from 'mapbox-gl' Vue.prototype.$mapb ...
在js或者App中，调起第三方地图产品（URI API）的汇总
URI API是为开发者提供直接调起第三方地图产品(Web地图.地图手机客户端)以满足特定业务场景下应用需求的程序接口,开发者只需按照接口规范构造一条标准的URI,便可在PC和移动端浏览器或移动开发应 ...
Android uni app 列表底部白条解决方案
uni app中android打开本地vue的列表会发现,底部有条白边. vue通过uni.getSystemInfoSync();方法获取系统信息,首次取值对,再次取值就出错 uni app每次启动 ...
vue插槽solt ，uni.app
一.什么是插槽? 插槽就是子组件提供给父组件使用的一个占位符,用<slot></solt>表示父组件可以在这个占位符中填充任何模板代码. 二.插槽的用法 1.创建一个子组件,在 ...
uniapp 微信小程序地图，在高德app、腾讯app、百度app、苹果地图app 中打开
一.效果: 点击图片一后,会跳转到图片二页面(无需自己写图片二页面,小程序会自动打开此页面) PS:示例图中(坐标)为"天安门".( <map> 可添加多个坐标点 ) ...

uni-app中使用mapbox地图

uni-app中使用mapbox地图相关推荐

最新文章

热门文章