小程序中地图组件的简单应用
因为之前写的h5用的是vue,最近调研看uni-app兼容vue3了,所以想来吃下螃蟹。本文记录在初次写小程序过程中的踩坑
安装uni-app
这块就不赘述了,搜一下很多教程。需要注意的是把vue3编译插件和scss编译插件安装上就可以了
vue3-mobile-uniapp提供企业级的开发demo
本模板vue3-uniapp-template 参考大佬kuanghua的移动端架构vue3-mobile-uniapp
在这基础上,加上腾讯地图的路径规划和撒点聚合
本架构使用的技术为:vue3(setup-script)+vite2+uniapp 的新一代的移动端框架
使用最先进的包管理工具pnpm
vuex的使用
在uni-app中vuex的一些基本用法,和平时的用法基本一样。
/src/pages/tableOne/TableOne.vue
const store = useStore()
/*getter*/
let getterValue = ref(null)
const getterFunc = () => {
getterValue.value = store.getters.cachedViews
}
/*mutations*/
const c_openVuexTest = () => {
store.commit('app/M_vuex_test', true)
}
/*actions*/
const openVuexTest = () => {
store.dispatch('app/A_vuex_test', true)
}
地图撒点功能
功能描述:我们需要把一些有经纬度信息的点数据在界面上显示。 理所当然我是用了uni-app的地图组件来实现这个功能
<template>
<view>
<map id="myMap" ref="myMap" style="width: 100%; height: 100vh;"
:longitude="mapState.longitude" :show-location="isShowLocation" :latitude="mapState.latitude"
:markers="myMarkers">
</map>
</view>
</template>
其中我们需要关注下markers中的marker结构,微信小程序map组件文档,小程序里的marker是支持聚合,label标注,callout气泡框
const marker = {
// rotate: 0, //旋转角度
iconPath: '/static/images/map/toiletIcon.png',
width: 20,
height: 20,
joinCluster: true, // 指定了该参数才会参与聚合
// label: {
// content: '当前位置',
// textAlign: 'center',
// color: '#FB3109'
// }
callout: { // 图标上方小气泡
content: `第${index}个测试点`,
display: 'BYCLICK' // 点击显示
}
}
路径规划功能
在实现路径规划功能的时候,我们需要在小程序上添加些配置,本文小程序特指微信小程序。 实现该功能需要我们先去申请一个腾讯地图的位置服务
-
路径规划插件申请接入 在腾讯微信公众平台中, “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”,搜索 “腾讯位置服务路线规划” 申请,申请后小程序开发者可在小程序内使用该插件。
- 在manifest.json文件中,添加以下配置,添加
/* 小程序特有相关 */
"mp-weixin": {
"appid": "xxxxx", // 填自己开发的appid
"setting": {
"urlCheck": false,
"checkSiteMap": false
},
"plugins": {
"routePlan": {
"version": "1.0.19", //这里是腾讯地图的路径规划组件版本
"provider": "wx50b5593e81dd937a"
}
},
"usingComponents": true,
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序定位"
}
}
},
- 使用插件
// eslint-disable-next-line no-undef
let plugin = requirePlugin('routePlan');
let key = 'xxxx-xxx-xx-xx-xx-xx'; //使用在腾讯位置服务申请的key
let referer = '公厕导航测试'; //调用插件的app的名称
const startNavigateTo = () => {
let endPoint = JSON.stringify({ //终点
'name': '测试地点',
'latitude': 23,
'longitude': 113
});
// #ifdef MP-WEIXIN
wx.navigateTo({url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer +
'&endPoint=' + endPoint
});
// #endif
}
路径规划插件相关参数可以查看官方文档路径规划插件