微信小程序怎么加入位置，详细指南与实践经验-奇妙百科

您可以在微信小程序中使用腾讯地图SDK,实现用户当前位置定位、地图展示、地点标记及路径规划等功能。本文将详细介绍如何在微信小程序中集成腾讯地图SDK,为开发者提供详尽的实践指南。您还可以使用小程序的定位和地图API来获取并展示周边服务。包括在app.json中添加地图组件，以及在页面中调用相关接口的操作方法。

本文目录导读：

登录小程序后台
进入“设置”页面
选择“位置”选项
添加位置信息
设置位置详情
保存并提交审核

随着智能手机的普及，移动互联网的发展越来越快，微信作为国内最大的社交平台，拥有着庞大的用户群体，为了满足用户的需求，微信小程序应运而生，微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用，如何在微信小程序中加入位置功能呢？本文将为您详细解答。

了解微信小程序的位置API

在开始之前，我们需要了解微信小程序的位置API，微信小程序提供了两种方式获取位置信息：基于GPS定位和基于蓝牙低功耗(BLE)定位，基于GPS定位需要用户的授权，而基于BLE定位则不需要，微信小程序还提供了一些地理位置相关的API,如获取用户所在城市的名称、附近的商户等。

获取用户的授权

1、在app.json文件中配置权限

我们需要在app.json文件中配置需要获取位置信息的权限，如果我们需要使用基于GPS定位的方式获取位置信息，我们需要在permission字段中添加“地理位置”。

微信小程序怎么加入位置，详细指南与实践经验

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于xxx功能"
    }
  }
}

2、在页面的js文件中请求权限

在页面的js文件中，我们需要调用wx.authorize()方法来请求用户的授权。

wx.authorize({
  scope: 'scope.userLocation',
  success() {
    console.log('授权成功');
  },
  fail() {
    console.log('授权失败');
  }
});

3、在用户拒绝授权后提示用户开启授权

如果用户拒绝了授权，我们需要提示用户开启授权，我们可以在wx.authorize()方法的fail回调函数中实现这个功能。

wx.authorize({
  scope: 'scope.userLocation',
  success() {
    console.log('授权成功');
  },
  fail() {
    wx.showModal({
      title: '提示',
      content: '请前往设置->隐私->定位服务开启',
      showCancel: false,
      confirmText: '去设置',
      okText: '暂不支持'
  });
  }
});

三、使用微信小程序的位置API获取位置信息并展示地图上的标记点

1、在页面的js文件中获取位置信息并展示地图上的标记点

微信小程序怎么加入位置，详细指南与实践经验

我们需要调用wx.getLocation()方法来获取用户的当前位置信息，我们可以将这些信息展示在地图上。

// 获取用户的当前位置信息(经度和纬度)
wx.getLocation({
  type: 'wgs84',
  success(res) {
    console.log('当前位置信息：', res);
    wx.openLocation({
       latitude: res.latitude, // 经度数组的第一个元素(纬度)有效值范围[-90~90]、longitude: res.longitude // 经度数组的第二个元素(经度)有效值范围[-180~180]、name: '自定义标注点名称' // 在地图上显示的标记点的名称、addressComponents: '' // 对地址信息的进一步细化(省市区等)、success(function (res) {}) // 该函数会在标注点成功添加到地图上时执行、cancel(function (res) {}) // 该函数会在标注点添加失败时执行、complete(function (res) {}) // 该函数会在标注点添加完成时执行、fail(function (res) {}) // 该函数会在标注点添加失败时执行、buttonsInfo: {} // 点击按钮时弹出的界面的信息列表、width: Math.max(document.body.clientWidth, screen.width * 0.2) // 该组件的宽度为屏幕宽度的20%、height: null // 该组件的高度为null、scaleLimit:16 // 如果设置该参数则组件会按比例缩放、enableMarkerClick: true // 当点击标记点时是否可以进行长按操作、enableAddressSearch: true // 当点击标记点时是否可以搜索地址、uploadImageSizeLimit:5*1024*1024 // 从相册选择图片时最多可以选择的大小为5MB、type: 'all' // 从相册选择图片时只显示图片类型的图标、imageCount:0,//默认显示图片的数量为0、successCallback(function (imgPaths) {}) // 该函数会在从相册选择图片成功时执行、failCallback(function (msg) {}) // 该函数会在从相册选择图片失败时执行、completeCallback(function (images) {}) // 该函数会在从相册选择图片完成时执行、cancelCallback(function (msg) {}) // 该函数会在从相册选择图片取消时执行、bindMarkerTapEvent(function (markertapdata) {}) // 该函数为自定义事件，当用户点击标记点时触发并返回标记点的详细信息、bindCalloutTapEvent(function (callouttapdata) {}) // 该函数为自定义事件，当用户长按标记点时触发并返回标记点的详细信息、bindContextMenuEvent(function (contextmenudata) {}) // 该函数为自定义事件，当用户右键菜单点击时触发并返回标记点的详细信息// 注意修改对应的坐标值和参数即可在自己的小程序中进行测试，如果要获取其他位置信息或者对位置信息进一步细化等操作可以参考官方文档 https://developers.weixin.qq.com/miniprogram/dev/api/location/geolocation/wx.getLocation.html)。');;}, fail() {}, complete() {});;};;";

微信小程序加入位置的方法