uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

第一步：登录小程序公众平台==>设置==>第三方设置

第二步：登录腾讯地图申请属于自己小程序的key

第三步：找到腾讯地图的插件

第四步：添加插件与允许授权

第五步：使用

uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

第一步：登录小程序公众平台==>设置==>第三方设置

uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

第二步：登录腾讯地图申请属于自己小程序的key

腾讯地图后台：https://lbs.qq.com/dev/console/application/mine

uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

添加key，授权使用的小程序appId

uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

第三步：找到腾讯地图的插件

插件文档：https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview

第四步：添加插件与允许授权

uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器

    "plugins" : {
            "chooseLocation" : {
                "version" : "1.0.9",
                "provider" : "wx76a9a06e5b4e693e"
            },
            "citySelector" : {
                "version" : "1.0.1",
                "provider" : "wx63ffb7b7894e99ae"
            }
        },

第五步：使用

1.地图中选择位置

    const key = ""; //使用在腾讯位置服务申请的key
	const referer = ''; //调用插件的app的名称
	const location = JSON.stringify({
		// 修改时回显位置
		latitude: this.form.lat || this.location.latitude,
		longitude: this.form.lon || this.location.longitude
	});
	const category = '生活服务,娱乐休闲';
	uni.navigateTo({
		url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' +
			location + '&category=' + category
	});

返回结果接收

const chooseLocation = requirePlugin('chooseLocation')
		
onShow() {
		const location = chooseLocation.getLocation(); // 如果点击确认选点按钮，则返回选点结果对象，否则返回null
		console.log(location)
		if (location) {
			this.form.actiPlace = location.name
			this.form.actiCity = location.city
			this.form.lat = location.latitude
			this.form.lon = location.longitude
		}
	},
	onUnload() {
		// 页面卸载时设置插件选点数据为null，防止再次进入页面，geLocation返回的是上次选点结果
		chooseLocation.setLocation(null);
	},

2.城市列表选择

	const key = ''; //使用在腾讯位置服务申请的key
	const referer = ''; //调用插件的app的名称
	const hotCitys = ''; // 用户自定义的的热门城市
	uni.navigateTo({	              
       url:`plugin://citySelector/indexkey=${key}&referer=${referer}&hotCitys=${hotCitys}`,
	})

返回结果接收

const citySelector = requirePlugin('citySelector')

onShow() {
	const selectedCity = citySelector.getCity(); // 选择城市后返回城市信息对象，若未选择返回null
	console.log(selectedCity)
	if (selectedCity) {
		let cityInfo = {
			city: selectedCity.fullname,
			latitude: selectedCity.location.latitude,
			longitude: selectedCity.location.longitude
		}
},
onUnload() {
	// 页面卸载时清空插件数据，防止再次进入页面，getCity返回的是上次的结果
	citySelector.clearCity();
},

更多操作请参考腾讯文档：https://lbs.qq.com/miniProgram/plugin/pluginGuide/pluginOverview文章来源地址https://www.toymoban.com/news/detail-411460.html

到了这里，关于uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！