Taro微信小程序-地图

前言

使用taro微信小程序+腾讯地图api，实现以下功能

输入框搜索地址下拉展示，点击地址选中
回到定位位置，位置标记点在可视范围内
当前位置与选择地址距离限制
这里基于已有腾讯地图的key进行实现，具体key的申请方式参照腾讯地图文档说明sdk

效果图

当前效果图非实际实现效果，只做大概的展示

效果图

具体实现（无视图实现）

1.初始化地图

2.授权使用位置信息

Taro.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限

Taro.getSetting({
  success: res => {
    // 通过scope.userLocation的值是否为true判断是否授权使用地理位置
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

Taro.openSetting 调起客户端小程序设置界面，返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限

Taro.openSetting({
  success: res => {
    // 通过scope.userLocation的值是否为true判断用户是否成功设置允许使用位置信息
    console.log(res.authSetting)
    // res.authSetting = {
    //   "scope.userInfo": true,
    //   "scope.userLocation": true
    // }
  }
})

Taro.getLocation 获取当前的地理位置

Taro.getLocation({
  isHighAccuracy: true, // 开启高精度定位
  altitude: true, // 传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
  type: 'gcj02', // wgs84 返回 gps 坐标，gcj02 返回可用于 openLocation 的坐标
  highAccuracyExpireTime: 3000, // 高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
  success: function (res) {
    this.curLatitude = res.latitude
    this.curLongitude = res.longitude
  }
})

3.使用sdk

引入SDK核心类

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
this.qqmapsdk = new QQMapWX({
  key: '申请的key'// 必填
})

reverseGeocoder 经纬度转换成地理位置

this.qmapsdk.reverseGeocoder({
  location: {
    latitude: this.curLatitude, // 纬度
    longitude: this.curLongitude // 经度
  },
  success: res => {
    this.region = res.result.address_component.city // 限制关键词所示的地域范围
  }
})

getSuggestion用于获取输入关键字的补完与提示，帮助用户快速输入（效果图下拉列表的数据）

this.qmapsdk.getSuggestion({
  keyword: '', // 输入地址筛选关键字
  page_index: 1,
  page_size: 8,
  region: this.region, // 限制关键词所示的地域范围
  region_fix: this.region ? 0 : 1, // 取值： 0：[默认]当前城市无结果时，自动扩大范围到全国匹配 1：固定在当前城市
  policy: 1, // policy=0：默认，常规策略 policy=1：本策略主要用于收货地址、上门服务地址的填写
  success: res => {
    ... // 具体的业务实现
  }
})

4.添加marker

const marker = {
  iconPath: '',
  latitude: '',
  longitude: '',
  width: '',
  height: '' 
}
this.markers = [marker]

5.回到当前位置

Taro.createMapContext 创建 map 上下文 MapContext 对象

this.mapCtx = Taro.createMapContext('myMap') // myMap是地图显示模块id
Taro.getLocation({
  isHighAccuracy: true,
  altitude: true,
  type: 'gcj02',
  highAccuracyExpireTime: 3000,
  success: res => {
    this.mapCtx.includePoints({
      padding: [10],
      points: [{
        latitude: res.latitude,
        longitude: res.longitude
      }]
  })
})
// 移动到定位到的位置
this.mapCtx.moveToLocation()

6.选取地址与当前位置距离

getDistance (lat1, lng1, lat2, lng2) {
  const a = (lat1 * Math.PI) / 180 - (lat2 * Math.PI) / 180
  const b = (lng1 * Math.PI) / 180 - (lng2 * Math.PI) / 180
  let dis = 2 * Math.asin(
    Math.sqrt(
    Math.pow(Math.sin(a / 2), 2) +
    Math.cos((lat1 * Math.PI) / 180) * Math.cos((lat2 * Math.PI) / 180) * Math.pow(Math.sin(b / 2), 2)
  ))
  dis = dis * 6371.393
  dis = Math.round(dis * 10000) / 10
  return dis
}