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

2020-05-2215:39:01APP与小程序开发Comments2,145 views字数 1372阅读模式
配置地理位置用途说明文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
在中的大括号内输入文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
"permission": {    "": {      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 小程序获取权限时展示的接口用途说明    }  }
微信小程序开发:获取用户位置信息并显示到地图上
微信小程序开发:获取用户位置信息并显示到地图上
在页面上添加map组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
1.在中添加map组件文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" markers="{{markers}}" style="position: fixed;width: 100%;height: 100%;">map>
map组件的详细介绍见网址:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html

https://developers.weixin.qq.com/miniprogram/dev/component/map.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html

2.在中编写获取用户位置信息的函数,将位置信息传入map组件的中心经纬度属性中文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
(1)在data中添加需要通过函数获得的数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
data: {    longitude:"",    latitude:"",    markers:[]  },
(2)获取用户位置信息函数getMyLocation,写在data括号后文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
getMyLocation:function(){    var that=this;    ({      type: 'wgs84',      success (res) {        console.log(res);        console.log("1",);        ({          latitude:res.latitude,          longitude:res.longitude,          markers: [{            iconPath: "/images/",            id: 0,            latitude: res.latitude,            longitude: res.longitude          }],        });        console.log("2",);      }     })  }
(3)使用getMyLocation函数中的API需要先获取用户位置信息授权,所以在监听页面加载函数onLoad中获取用户授权。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
 onLoad: function (options) {    var that=this;    //获取用户当前的授权状态    ({      success(res) {        //若用户没有授权地理位置        if (!['']) {          //在调用需授权 API 之前,提前向用户发起授权请求          ({            scope: '',            //用户同意授权            success () {              // 用户已经同意小程序使用地理位置,后续调用  接口不会弹窗询问              ();            },            ////用户不同意授权            fail(){                ({                  title: '提示',                  content: '此功能需获取位置信息,请授权',                  success: function (res) {                    if (res.confirm == false) {                      return false;                    }                    ({                      success(res) {                        //如果再次拒绝则返回页面并提示                        if (!['']) {                          ({                            title: '此功能需获取位置信息,请重新设置',                            duration: 3000,                            icon: 'none'                          })                        } else {                          //允许授权,调用地图                          ()                        }                      }                    })                  }                })             }          })        }        else{          ();        }      }    })  },
编译运行文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
注意:先清除缓存,否则默认开发者工具已经授权。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
微信小程序开发:获取用户位置信息并显示到地图上
运行结果:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
微信小程序开发:获取用户位置信息并显示到地图上
(1)选择允许,则显示用户地理位置(标记点),若用开发者工具运行,显示的位置为用户电脑IP地址所在的城市中心,若用真机调试,显示的位置为用户手机地理位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
微信小程序开发:获取用户位置信息并显示到地图上
(2)选择不允许,则提示用户授权位置信息,用户重新授权后才显示正确地理位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
微信小程序开发:获取用户位置信息并显示到地图上
微信小程序开发:获取用户位置信息并显示到地图上
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/19276.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/xcx/19276.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定