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

2020-5-22

配置地理位置用途说明

在中的大括号内输入

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

在页面上添加map组件

1.在中添加map组件

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

map组件的详细介绍见网址：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html

2.在中编写获取用户位置信息的函数，将位置信息传入map组件的中心经纬度属性中

（1）在data中添加需要通过函数获得的数据

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

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

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中获取用户授权。

 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{          ();        }      }    })  },

编译运行

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

运行结果：

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

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

THE END

HBase RowKey：是什么？原理？怎么设计？使用场景？设计原则？优化？

<<上一篇

HBase中ZooKeeper核心配置|创建的主要子节点

下一篇>>