uni-app中使用腾讯位置服务实现小程序地图选点功能

2022/1/1 12:37:53

本文主要是介绍uni-app中使用腾讯位置服务实现小程序地图选点功能,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

文章目录

            • 1. 官方文档
            • 2. 小程序添加插件
            • 3. HBuilder配置
            • 4. 配置代码
            • 5. 页面代码

1. 官方文档

技术选定(地图选点插件)
(对应官网:https://lbs.qq.com/miniProgram/plugin/pluginGuide/locationPicker )
在这里插入图片描述
在这里插入图片描述

2. 小程序添加插件

去微信小程序中-设置
https://mp.weixin.qq.com/wxamp/basicprofile/thirdauth?token=1361472091&lang=zh_CN
在这里插入图片描述
直接搜索腾讯位置服务地图选点插件即可
在这里插入图片描述

准备工作:登录微信公众平台后,添加的插件,如上图

  1. 如果是微信小程序则直接按照,文档给定的4项步骤配置完成
3. HBuilder配置

** 如果使用uni-app开发的小程序,配置的位置 HBuilder工具中注意 **
如图:
在这里插入图片描述

4. 配置代码

实现代码【上面链接官方都有】
manifest.json

	/* 小程序特有相关 */
	"mp-weixin": {
		"appid": "wx6a968da933xxxxxx",
		"setting": {
			"urlCheck": false,
			"es6": true
		},
		"usingComponents": true,
		"permission": {
			"scope.userLocation": {
				"desc": "你的位置信息将用于小程序定位"
			}
		},
		"plugins": {
			"chooseLocation": {
				"version": "1.0.5",
				"provider": "wx76a9a06e5b4e693e"
			}
		}
	},

5. 页面代码
<template>
	<view>
		您已选择:{{chooseLocation}}
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chooseLocation: '中国',

			};
		},
		onLoad() {
			this.getAddress();

		},
		// 从地图选点插件返回后,在页面的onShow生命周期函数中能够调用插件接口,取得选点结果对象
		onShow() {
			const chooseLocation = requirePlugin('chooseLocation');
			const location = chooseLocation.getLocation(); // 如果点击确认选点按钮,则返回选点结果对象,否则返回null
			console.log("您所选择的位置:", location);
			if(location){
				this.chooseLocation = location.address;
			}
			
		},
		onUnload() {
			// 页面卸载时设置插件选点数据为null,防止再次进入页面,geLocation返回的是上次选点结果
			chooseLocation.setLocation(null);
		},
		methods: {
			getAddress() {
				const key = '4DABZ-MTZ2R-PZLW2-WX6FG-W5IXE-APFAF'; //使用在腾讯位置服务申请的key
				const referer = '那年绿荫下白裙的你'; //调用插件的app的名称
				const location = JSON.stringify({
					latitude: 39.89631551,
					longitude: 116.323459711
				});
				const category = '生活服务,娱乐休闲';
				wx.navigateTo({
					url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category
				});
			},

		}
	};
</script>

<style lang="scss" scoped>
</style>


这篇关于uni-app中使用腾讯位置服务实现小程序地图选点功能的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程