腾讯位置服务--微信小程序JSSDK地图开发

腾讯位置服务–微信小程序JSSDK地图开发

1、腾讯位置服务
文档传送门：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

【源码在最后，key值和 JavaScriptSDK v1.2文件需要在官网中申请和下载】

官方开发流程大致如下：
1）准备工作

1、申请key值，选择WebServiceAPI，配置小程序appID

2、添加request合法域名

3、下载 JavaScriptSDK v1.2文件

4、小程序示例引入

【总结】：该方法用于不需要打开地图直接获取地理位置信息，而需要打开地图获取地理位置信息，则直接用微信小程序的API即可实现【wx.getLocation , wx.openLocation , wx.chooseLocation】，与JSSDK引入的区别就是，无法获取省市区，具有特征标志(公交站/医院)周边信息

2）在小程序对应页面引入

1）微信小程序的API接口实现【wx.getLocation , wx.openLocation , wx.chooseLocation】

2）JSSDK引入接口实现

3)传入申请好的key值，每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图 ， 上文已讲述获取key的方法

4）以搜索周边酒店为例子，keyword可以自己传

效果为：

1）wxml文件

<!-- 这是地图部分 -->
<view class="map_container">
  <map class='map' longitude='{{longitude}}' latitude='{{latitude}}' scale='{{scale}}' show-location='true'
    subkey="CATBZ-K5KK3-DPY3Q-3YIBL-NI4KH-5VBN4" bindtap='getLonAndLat'></map>
</view>

<!-- JSSDK核心类操作 -->
<view class="location-operation padding">
  <!-- 获取当前位置信息 -->
  <view>
    <view class="font-12-thin">
      经度：{{longitude}}； 纬度：{{latitude}}；
    </view>
    <view class="font-12-thin">
      地址：{{address}}； <text wx:if="{{name !=''}}">店名：{{name}}；</text>
    </view>
  </view>
  <!-- 输入经纬度获取当前位置信息 -->
  <view class="flex-box-start margin-top">
    <view>
      经纬度：
    </view>
    <view>
      <input placeholder="经度" class="latlon-input" type="number" placeholder-class="placeholder-class"
        value="{{lonValue}}" bindinput="inputLon" />
    </view>
    <view>
      <input placeholder="纬度" class="latlon-input" type="number" placeholder-class="placeholder-class"
        value="{{latValue}}" bindinput="inputLat" />
    </view>
    <view class="location-btn" bindtap="lonLatBtn">
      搜索
    </view>
  </view>
  <!-- 获取当前定位 -->
  <view class="flex-box-start margin-top">
    <view class="location-text">
      地图位置：{{province}}-{{city}}-{{district}}
    </view>
    <view class="location-btn" bindtap="getLocation">
      定位
    </view>
  </view>
  <!-- 搜索框输入搜索 -->
  <view class="flex-box-start margin-top">
    <view>
      搜索框搜索：
    </view>
    <view class="search-input">
      <input placeholder="请输入搜索值" class="input-css" type="text" placeholder-class="placeholder-class"
        value="{{searchValue}}" bindinput="searchInput" />
    </view>
    <view class="location-btn" bindtap="searchBtn">
      搜索
    </view>
  </view>
  <!-- 搜索周边信息 -->
  <view class="flex-box-start margin-top">
    <view>
      快捷周边搜索：
    </view>
    <view class="{{ searchIndex == index?'choose-search-text':'unchoose-search-text'}} search-text"
      wx:for="{{shopsAroundList}}" wx:key='index' data-item='{{item}}' bindtap="clickSearchText" data-index="{{index}}">
      {{item.text}}
    </view>
  </view>
</view>

2）js文件

const app = getApp()
const filter = app.commModule.filter //路由守卫
const common = app.commModule.common //公共方法
// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../../sdk/qqmap-wx-jssdk.js');
var qqmapsdk;
Page(filter({
  data: {
    latitude: 34.752465,
    longitude: 113.6653,
    accuracy: 0, //位置的精度  113.6653,34.752465
    scale: 15, //缩放级别
    province: '河南省', //省份
    city: '郑州市', //城市  
    district: '二七区', //区 
    street : '正兴街' , //街道
    address:'河南省郑州市二七区正兴街', //地址
    name:'', //店名
    lonValue :'', //输入的经度
    latValue :'' , //输入的纬度
    shopsAroundList: [{
        id: 0,
        text: '酒店'
      },
      {
        id: 1,
        text: '餐饮'
      },
      {
        id: 2,
        text: '娱乐'
      },
      {
        id: 3,
        text: '学校'
      },
      {
        id: 4,
        text: '医院'
      },
    ], //周边商店列表
    searchValue: '', //搜索框输入值
    searchIndex: 0, //快捷搜索选中的默认值

    //controls控件 是左下角圆圈小图标,用户无论放大多少,点这里可以立刻回到当前定位(控件（更新一下,即将废弃，建议使用 cover-view 代替）)
    /*     controls: [{
          id: 1,
          iconPath: '../../../../../static/add.png',
          position: {
            left: 15,
            top: 260,
            width: 40,
            height: 40
          },
          clickable: true
        }], */
    /*     markers:[{
          callout: {
            content: '腾讯总部大楼',
            padding: 10,
            borderRadius: 2,
            display: 'ALWAYS'
          },
          latitude: 40.040415,
          longitude: 116.273511,
          iconPath: '../../../../../static/add.png',
          width: '34px',
          height: '34px',
          rotate: 0,
          alpha: 1
        },], */
    //distanceArr: []

  },

  //key 为  每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图
  onLoad: function () {
    //获取定位的地理位置文字
    qqmapsdk = new QQMapWX({
      key: '每个应用的地图只能用一个key，不能重复使用，需要自己生成才能用JSSDK地图 ， 上文已讲述获取key的方法'
    });
    //获取当前地位的经纬度
    //this.getLocation()

  },
  onShow: function () {
    // 调用接口
    //this.searchLocation()
    //this.getCityList()
    //this.getDistrictByCityId()
  },
    /**
   * @description: 点击地图获取选取位置的经纬度
   * @return {获取选取位置的 longitude:经度  latitude:纬度 }
   **/
  getLonAndLat:function(ele){
    console.log(ele)
    let that = this
    that.setData({
      longitude : ele.detail.longitude,
      latitude : ele.detail.latitude
    })
    //that.getCurrentLocation()
    that.getCurrentLocation(ele.detail.longitude,ele.detail.latitude)
  },

  /**
   * @description: 获取当前的地理位置
   * @return {获取当前位置的 longitude:经度  latitude:纬度 }
   **/
  getLocation: function () {
    let that = this
    wx.getLocation({
      type: 'gcj02', //wgs84 返回 gps 坐标，gcj02 返回可用于 wx.openLocation 的坐标
      isHighAccuracy: true,
      highAccuracyExpireTime: 3500, //高精度定位超时时间(ms)，指定时间内返回最高精度，该值3000ms以上高精度定位才有效果
      success(res) {
        console.log(res)
        if (res.errMsg == "getLocation:ok") {
          that.getCurrentLocation(res.longitude, res.latitude) //选择当前位置的信息
          that.setData({
            longitude: res.longitude,
            latitude: res.latitude,
          })
        } else {
          common.errorMsg('定位请求失败！')
        }
      },
      fail: function (res) {
        common.errorMsg('请检查网络以及GPS定位是否开启')
        setTimeout(() => {
          wx.navigateBack()
        }, 1500)
      }
    })
  },

  /**
   * @description: 打开所在经纬度的位置的地图
   * @param {经度}  longitude
   * @param {纬度}  latitude
   * @return {获取传递的经纬度的地图 }
   **/
  openLocation: function (longitude, latitude) {
    wx.openLocation({
      longitude: longitude,
      latitude: latitude,
      name: '地址', //定位地址名称
      scale: 28, //缩放比例
      type: 'gcj02', //定位类型
    })
  },

  /**
   * @description: 打开地图选择位置,只有点击确定的收触发
   * @param {经度}  longitude
   * @param {纬度}  latitude
   * @return {获取  adresss：地址； name:店名；  longitude:经度  latitude:纬度  }
   **/
  chooseLocation: function (longitude, latitude) {
    let that = this
    wx.chooseLocation({
      longitude: longitude,
      latitude: latitude,
      success: function (res) {
        console.log(res)
        if (res.errMsg == "chooseLocation:ok") {
          that.getPageData(res)
          wx.navigateBack()
        } else {
          common.errorMsg('选取位置失败')
          wx.navigateBack()
        }
      },
      fail: function (res) {
        common.errorMsg('选取位置失败')
        wx.navigateBack()
      }
    })
  },

  /**
   * @description: 获取前一个页面，并给前一个页面赋值
   * @param {传入请求成功的res}  res
   * @return {给前一个页面赋值  adresss：地址； name:店名；  longitude:经度  latitude:纬度  }
   **/
  getPageData: function (res) {
    let pages = getCurrentPages();
    let prevPage = pages[pages.length - 2];
    //给前一页赋值
    prevPage.setData({
      longitude: res.longitude, //经度
      latitude: res.latitude, //纬度
      address: res.address, //地址
      name: res.name, //店名
    })
  },

  /**
   * @description: 引入地图JSSDK,实现搜索地图周边，不传递location对象是根据当前位置
   * @param {搜索值}  keyword
   * @param {经度}  longitude
   * @param {纬度}  latitude
   * @return {获取  province：省； city:市；  district:区 等 }
   **/
  searchLocation: function (keyword, longitude, latitude) {
    let that = this
    qqmapsdk.search({
      location: {
        longitude: longitude || that.data.longitude,
        latitude: latitude || that.data.latitude
      },
      keyword: keyword, //输入的搜索关键字
      success: function (res) {
        console.log(res);
      },
      fail: function (res) {
        console.log(res);
      },
      /*       complete: function (res) {
              console.log(res);
            } */
    })
  },

  // 获取当前地理位置

  /**
   * @description: 使用经纬度解析出当前地理位置文字信息
   * @param {经度}  longitude
   * @param {纬度}  latitude
   * @return {获取  province：省； city:市；  district:区 等 }
   **/
  getCurrentLocation: function (longitude, latitude) {
    let that = this;
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: function (res) {
        console.log(res)
        if (res.message == "query ok") {
          let result = res.result.ad_info
          let address = res.result.address

          that.setData({
            province: result.province,
            city: result.city,
            district: result.district,
            street　: result.street,
            address : address,
          })
        } else {
          common.errorMsg('获取当前地点位置失败！')
        }
      },
      fail: function (res) {
        console.log(res);
      },
      complete: function (res) {
        // console.log(res);
      }
    });
  },

  /**
   * @description: 获取城市列表
   * @return {返回全国城市列表}
   **/
  getCityList: function () {
    let that = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function (res) { //成功后的回调
        console.log(res);
        console.log('省份数据：', res.result[0]); //打印省份数据
        console.log('城市数据：', res.result[1]); //打印城市数据
        console.log('区县数据：', res.result[2]); //打印区县数据
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

  /**
   * @description: 获取城市区县
   * @param {城市列表id}  id
   * @return {返回全国城市列表 }
   **/
  getDistrictByCityId: function (id) {
    let that = this;
    //调用获取城市列表接口
    qqmapsdk.getCityList({
      success: function (res) { //成功后的回调
        console.log(res);
        console.log('省份数据：', res.result[0])
        var city = res.result[0];
        //根据对应接口getCityList返回数据的Id获取区县数据（以北京为例）
        qqmapsdk.getDistrictByCityId({
          // 传入对应省份ID获得城市数据，传入城市ID获得区县数据,依次类推
          id: id || city[0].id, //对应接口getCityList返回数据的Id，如：北京是'110000'
          success: function (res) { //成功后的回调
            console.log(res);
            console.log('对应城市ID下的区县数据(以北京为例)：', res.result[0]);
          },
          fail: function (error) {
            console.error(error);
          },
          complete: function (res) {
            console.log(res);
          }
        });
      },
      fail: function (error) {
        console.error(error);
      },
      complete: function (res) {
        console.log(res);
      }
    });
  },

  //经纬度搜索输入
  inputLon:function(ele){
    var e = ele.detail.value
    this.setData({
      lonValue : e
    })
  },
  //纬度搜索框输入
  inputLat:function(ele){
    var e = ele.detail.value
    this.setData({
      latValue : e
    })
  },
  //经纬度搜索地址按钮
  lonLatBtn: function(){
    let lon = this.data.lonValue
    let lat = this.data.latValue
    if(lon !='' && lat !='' && lat<90){
      this.getCurrentLocation(this.data.lonValue,this.data.latValue)
    }else{
      common.errorMsg('请输入正确的经纬度')
    }

  },

  //搜索输入框
  searchInput: function (ele) {
    let that = this
    var e = ele.detail.value
    console.log(e)
    that.setData({
      searchValue: e
    })
  },

  //搜索框按钮--搜索
  searchBtn: function () {
    let that = this
    that.searchLocation(that.data.searchValue)
  },

  //快捷搜索
  clickSearchText: function (ele) {
    let that = this
    let item = ele.currentTarget.dataset.item
    let index = ele.currentTarget.dataset.index
    that.setData({
      searchIndex: index,
    })
    that.searchLocation(item.text)
  }

}))

3）wxss文件

page{
  font-size: 32rpx;
}
.map_container {
  height: 50vh;
  width: 100%;
}
.map {
  height: 100%;
  width: 100%;
}
.location-btn{
  margin-left: 20rpx;
  padding: 4rpx 12rpx;
  border: solid 1rpx rgb(255,179,26);
  color: rgb(255,179,26);
  border-radius: 8rpx;
}

.input-css{
  padding: 4rpx 10rpx;
  background:#DCDCDC;
}

.search-text{
  margin-right: 20rpx;
}

.choose-search-text{
  color: rgb(255,179,26);
}
.unchoose-search-text{
  color: #333333;
}

.latlon-input{
  width: 180rpx;
  border-bottom: solid 1rpx #999999;
  margin-right: 20rpx;
}

完结散花…

下一章：讲解小程序JSSDK在城市列表中的应用