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

配置地理位置使用说明在

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

中输入大括号

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

在页面添加地图组件1。添加地图组件

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

地图组件的详细介绍请参见网址：

https://developers.weixin.qq.com/miniprogram/dev/component/map.html2。在 中编写获取用户位置信息的函数，将位置信息发送到地图组件的中心经纬度属性 (1) 在 data

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

中添加必须通过函数获取的数据 (2) 获取用户位置信息函数getMyLocation，写在数据括号后

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) 如果您选择不允许，系统会要求用户批准位置信息。只有在用户重新授权后才会显示正确的位置。