用vue3在uni-app写小程序中地图组件的简单应用

1,607 阅读3分钟

小程序中地图组件的简单应用

因为之前写的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的地图组件来实现这个功能

image.png

<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' // 点击显示
  }
}

路径规划功能

在实现路径规划功能的时候,我们需要在小程序上添加些配置,本文小程序特指微信小程序。 实现该功能需要我们先去申请一个腾讯地图的位置服务

  • 注册申请腾讯位置服务

  • 路径规划插件申请接入 在腾讯微信公众平台中, “微信小程序官方后台-设置-第三方服务-插件管理” 里点击 “添加插件”,搜索 “腾讯位置服务路线规划” 申请,申请后小程序开发者可在小程序内使用该插件。

image.png

  • 在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": "你的位置信息将用于小程序定位"
			}
		}
	},
  • 使用插件

image.png

// 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
		
	}

路径规划插件相关参数可以查看官方文档路径规划插件

image.png