1.配置地理位置用途说明

在app.json中的大括号内输入

"permission": {"scope.userLocation": {"desc": "你的位置信息将用于小程序位置接口的效果展示" // 小程序获取权限时展示的接口用途说明}}

2.在页面上添加map组件

1.在index.wxml中添加map组件

<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" style="position: fixed;width: 100%;height: 100%;"></map>

map组件的详细介绍见网址微信官方文档map组件

2.在index.js中编写获取用户位置信息的函数，将位置信息传入map组件的中心经纬度属性中。
（1）在data中添加需要通过函数获得的数据

data: {longitude:"",latitude:"",markers:[]},

（2）获取用户位置信息函数getMyLocation，写在data括号后

getMyLocation:function(){var that=this;wx.getLocation({type: 'wgs84',success (res) {console.log(res);console.log("1",that.data.latitude);that.setData({latitude:res.latitude,longitude:res.longitude,markers: [{iconPath: "/images/MyLoc.png",id: 0,latitude: res.latitude,longitude: res.longitude}],});console.log("2",that.data.latitude);}})}

（3）使用getMyLocation函数中的wx.getLocationAPI需要先获取用户位置信息授权，所以在监听页面加载函数onLoad中获取用户授权。

 onLoad: function (options) {var that=this;//获取用户当前的授权状态wx.getSetting({success(res) {//若用户没有授权地理位置if (!res.authSetting['scope.userLocation']) {//在调用需授权 API 之前，提前向用户发起授权请求wx.authorize({scope: 'scope.userLocation',//用户同意授权success () {// 用户已经同意小程序使用地理位置，后续调用 wx.getLocation 接口不会弹窗询问that.getMyLocation();},用户不同意授权fail(){wx.showModal({title: '提示',content: '此功能需获取位置信息，请授权',success: function (res) {if (res.confirm == false) {return false;}wx.openSetting({success(res) {//如果再次拒绝则返回页面并提示if (!res.authSetting['scope.userLocation']) {wx.showToast({title: '此功能需获取位置信息，请重新设置',duration: 3000,icon: 'none'})} else {//允许授权，调用地图that.onLoad()}}})}}) }})}else{that.getMyLocation();}}})},

3.编译运行

注意：先清除缓存，否则默认开发者工具已经授权。

运行结果：

（1）选择允许，则显示用户地理位置（标记点），若用开发者工具运行，显示的位置为用户电脑IP地址所在的城市中心，若用真机调试，显示的位置为用户手机地理位置。

（2）选择不允许，则提示用户授权位置信息，用户重新授权后才显示正确地理位置。

微信小程序获取用户位置信息并显示到地图上相关推荐

微信小程序—获取用户位置信息
一.使用 wx.getLocation 获取经纬度信息 1.1 在 app.json 中加入如下配置 "permission": {"scope.userLocation ...
微信小程序获取用户位置信息
1.在 app.json 里面增加 permission 属性配置小程序配置 | 微信开放文档 "permission": {"scope.userLocation&qu ...
微信小程序-获取用户位置（经纬度+所在城市）
微信小程序-获取用户位置(经纬度+所在城市) 文章目录微信小程序-获取用户位置(经纬度+所在城市) 一.目标二.实现思路三.实现步骤 3.1 用到的接口函数 3.2 具体步骤 3.2.1 创建界 ...
微信小程序获取用户真实信息
微信在2020年4月13日到4月28日调整了获取用户信息的接口,4月28日24时后发布的新版本小程序就获取不到用户的真实信息了附上原文链接:微信用户信息接口调整注意事项: 调用wx.getUser ...
uniapp微信小程序获取当前位置信息、经纬度转换、导航地图实现
1.调用接口,官网文档是这样写的 uni.getLocation({type: 'wgs84',success: function (res) {console.log('当前位置的经度:' + re ...
uni-app 对接微信小程序获取用户个人信息和获取用户手机号码
第一次对接小程序授权的时候以为能一进入这个项目就要调用获取授权信息,后面写好逻辑之后提交审核,一直审核不通过,后面查了原因之后才发现不能一进入页面就调用授权,而且项目需要个人信息和手机号码两个都要获取 ...
微信小程序——获取用户个人信息
从2021.4.13日起,微信将原本获取用户的API接口由getUserInfo变更为了getUserProfile(从原来的开发者可以直接获取用户信息变成了开发者只能获取匿名的用户信息,只有用户点击 ...
微信小程序获取用户位置坐标，调用腾讯地图api，转换成地区
需求:首页获取用户位置坐标,转换成功实际省市区,寄存在缓存中: 项目开发使用的是美团的mpvue,谁用谁知道(坑有不少但对于习惯vue开发的,也挺友好!) 小程序文档先上为敬腾讯地图注册获取key, ...
微信小程序获取用户简要信息
因为项目的需要,研究了一下微信获取用户的简单信息,在过程中耗费了许多的时间,想发出来与大家一起分享学习,有大牛看到不足的地方也希望大家指教! 小程序: var utils = require(&quo ...

微信小程序获取用户位置信息并显示到地图上

1.配置地理位置用途说明

2.在页面上添加map组件

3.编译运行

微信小程序获取用户位置信息并显示到地图上相关推荐

最新文章

热门文章