微信小程序 LBS 能力全面解析

1 月 9 日随着小程序的发布，在技术圈内引起一大波浪潮，在已发布的小程序中大部分已经用到了腾讯位置服务能力，而且一部分小程序是强依赖位置服务能力的，如：摩拜单车、通勤助手等必须要获取用户位置才能进行后续的交互，吃喝玩乐类的小程序在店铺详情都会有地址位置展示页面。这些都是腾讯位置服务的地图能力体现。当然小程序里包含的地图能力还远不止这些，下面让我们对小程序里的位置服务能力一一进行分享。

分享之前我们先来看看地图能力在小程序架构体现中所处的位置。

小程序架构图解

如图标黄处为地图能力所处的一个位置，举个例子，比如调用定位能力获取用户当前位置的一个流程：

首先调用 JS API wx.getLocation 接口 -> 调用地图 sdk 获取位置接口 -> 地图 sdk 成功后回调 -> JS API 成功后回调。

回归正题，了解了整体的调用流程，下面我们对具体的地图能力进行详细讲解。

小程序位置服务能力

目前微信小程序下，提供了丰富的组件和 API 供开发者使用，其中原生提供的位置服务已经包含核心位置能力 API 及地图组件。

位置能力 API

不仅包括基础的定位 API，也提供了位置展示和位置选择的调用 API，开发者只需要一个 API 就能直接调起原生能力，通过极低的成本就能完成相应的开发。

wx.getLocation(OBJECT)

获取当前的地理位置、速度。

场景

几乎任何一个应用都要获取用户当前的位置，大家应该经常会看到一个提示xxx要获取你当前的位置 允许 不允许，这就是获取当前位置的安全验证提示。知道了我的位置就可以实现周边的饭店、学校、厕所、出租车等等一系列周边相关的场景。

示例代码：

wx.getLocation({
  type: 'gcj02',
  success: function(res) {
   
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy
  }
})

wx.chooseLocation(OBJECT)

打开地图选择位置

场景

选择一个位置可以快速填写购物时的配送地址，选择另外一个位置去订外卖，一般在回家的路上提前订好，到家就正好可以吃了。出去旅游前我们要选择景点周边的住宿等等都离不开要选择另为一个位置的场景。

效果

示例代码：

wx.chooseLocation({
    success: function (res) {
   
        var latitude = res.latitude
        var longitude = res.longitude
        var name= res.name
        var address= res.address
     },
     cancel: function () {
   
       console.log('取消')
     },
     fail: function () {
   
       console.log('失败');
     }
   })

注意：在选点时如果是通过拖动地图并且选中的是默认的第一条，则很有可能 success 回调中 name 字段为空，因为这样标的点不一定能对应到 POI，列表中的非第一条内容则为以当前点的经纬度检索周边的 poi，所以除第一条其它都是有名称的，大家在使用的时候需要注意一下。

POI（Point of Interest，兴趣点）。在地图表达中，一个 POI 可代表一栋大厦、一家商铺、一处景点等等。

wx.openLocation(OBJECT)

使用微信内置地图查看位置。

场景

展示一个位置的场景大家应该经常见到，比如：美团、点评里的店铺详情页面都有个店铺地址，点击进入会看到地图上标记了一个位置点。效果类似下图。

效果

代码示例：

wx.openLocation({
     latitude: 39.908683,
     longitude: 116.397915,
     scale: 18,
     name: '天安门',
     address: '北京市东城区外桥',
     complete: function () {
       console.log('complete:', arguments);
     }
 });

map 组件

组件是小程序为开发者提供的基础组件，示例:, map组件包含以