微信小程序里面使用腾讯地图定位

1.进入腾讯地图开放平台,点击开放平台中的微信小程序JavaScript SDK,按照步骤进行操作
在这里插入图片描述
注意:在key管理中要填上自己申请的微信小程序ID
在这里插入图片描述
一直进行到第四步
然后在要使用定位的页面中引入

注意:刚才下载的文件一定要保证路径的正确

var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;

比如
在这里插入图片描述
然后使用

methods:{
			
			location(){
				qqmapsdk = new QQMapWX({
					           key: 'B4VBZ-R6DWS-WVKOX-6KXBL-GDA2Q-ZWBTP'
				})
				qqmapsdk.reverseGeocoder({
					success:res=>{
						console.log(res)
						this.address=res.result.ad_info.city
					},
					fail:err=>{
						console.log('用户拒绝定位')
						this.address="北京市"
					}
				})
				
			}
		},
		created() {
			this.location()()
		}

记得在微信小程序的app.json中添加一个permission


 "permission": {
    "scope.userLocation": {
    "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },

在这里插入图片描述

如果要封装这个定位
1.创建封装定位的JavaScript文件

//定位封装
var QQMapWX = require('./qqmap-wx-jssdk.js');
var qqmapsdk;
function location(){
				return new Promise((resolve,reject)=>{
					qqmapsdk = new QQMapWX({
						           key: 'B4VBZ-R6DWS-WVKOX-6KXBL-GDA2Q-ZWBTP'
					})
					qqmapsdk.reverseGeocoder({
						success:res=>{
							resolve(res)
						},
						fail:err=>{
							reject(err)
						}
					})
				})
				
				
}
export {location}

2.在组件中使用这个封装的定位文件

在这里插入图片描述
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序可以通过调用腾讯地图API实现一些地图相关的功能。首先,在小程序开发过程中,需要先在微信公众平台申请开通腾讯地图API的权限。然后,开发者可以使用小程序的开发工具,在相关的页面中引入腾讯地图API的SDK。 在小程序中调用腾讯地图API可以实现一些功能,如地图显示、定位、搜索、导航等。开发者可以在小程序中创建一个地图容器,通过调用腾讯地图API的相关方法,将地图显示在小程序中的指定位置上。用户可以通过手势操作地图进行缩放、平移等操作。 同时,通过腾讯地图API的定位功能,小程序可以获取用户的地理位置信息。开发者可以在小程序中调用相关接口,实现用户位置的定位和显示。此外,小程序还可以通过调用腾讯地图API的搜索功能,实现地点、位置、路线的搜索。用户可以通过输入关键词,获取相关的地点信息,并在地图上显示。 另外,小程序还可以调用腾讯地图API的导航功能,实现路线规划和导航功能。用户可以通过输入起始点和终点,获取最佳的交通路线,并在地图上显示导航路线。开发者可以通过调用腾讯地图API提供的导航接口,实现小程序的导航功能。 总之,微信小程序可以通过调用腾讯地图API实现地图显示、定位、搜索和导航等功能,为用户提供更好的地理信息服务。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值