微信小程序开发之——附近酒店-实现(2)

一 概述

• 腾讯地图sdk配置
• 地图全屏显示并将位置定位到当前位置
• 搜索附近的酒店
• 显示当前位置的名称
• 点击GPS图标，回到定位位置

二 腾讯地图sdk配置

2.1 将腾讯地图SDK添加到小程序libs文件夹下(没有先创建)

2.2 用接口测试号(也可以正式号)扫码登录后，绑定合法域名

https://apis.map.qq.com

2.3 初始化SDK(pages/map/map.js)

// 引入SDK核心类
var QQMapWX = require('../../libs/qqmap-wx-jssdk')
// 实例化API核心类
var qqmapsdk = new QQMapWX({
  key: 'R72BZ-EMTKU-JGKVD-2VXJM-WMHC7-xxxx' // 必填
})

三 地图全屏显示并将位置定位到当前位置

3.1 布局文件(map.wxml)

<map  id="mapId" longitude="{{longitude}}" latitude="{{latitude}}" scale="{{scale}}" show-location>
</map>

3.2 样式文件(map.wxss)

map{
  height: 100vh;
  width: 100vw;
}

3.3 逻辑文件(map.js)

  data: {
    longitude: null, // 地图中心点经度
    latitude: null, // 地图中心点纬度
  },
  onReady: function () {
    wx.getLocation({
      type: 'gcj02',
      success: res => {
        //console.log(res)
        this.setData({
          longitude: res.longitude,
          latitude: res.latitude,
        })
      }
    })
  }, 

3.4 权限设置(app.json)

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小游戏位置接口的效果展示"
    }
  },

3.5 效果图

四 搜索附近的酒店(markers)

4.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
</map>

说明：

• bindregionchange：当地图视图区域发生变化时调用
• markers：显示搜索到的标记物

4.2 逻辑文件(map.js)

 data: {
    scale: '16',
    markers: null,
    longitude: null, // 地图中心点经度
    latitude: null, // 地图中心点纬度
  },
 //视野发生变化时触发
  bindRegionChange: function (e) {
    //console.log(e)
    if (e.type === 'end') {
      this.mapCtx.getCenterLocation({
        success: res => {
          this.getHotel(res.longitude, res.latitude)
        },
        fail: res => {
          console.log("搜索失败")
        }
      })
    }
  },
  //搜索酒店
  getHotel(longitude, latitude) {
    //调用接口
    qqmapsdk.search({
      keyword: '酒店',
      location: {
        scale: 16,
        longitude: longitude,
        latitude: latitude
      },
      success: res => {
        // console.log(res)
        var mark = []
        //酒店标记
        for (let i in res.data) {
          mark.push({
            iconPath: '/images/hotel.png',
            id: parseInt(i),
            latitude: res.data[i].location.lat,
            longitude: res.data[i].location.lng,
            width: 30,
            height: 30
          })
        }
        //中心点标记
        mark.push({
          iconPath: '/images/center.png',
          id: res.data.length,
          longitude: longitude,
          latitude: latitude,
          width: 15,
          height: 40
        })
        //标记显示
        this.setData({
          markers: mark
        })
      },
      fail: res => {
        console.log(res)
      }
    })
  },

说明：

• MapContext.getCenterLocation(Object object)：获取当前地图中心的经纬度。返回的是 gcj02 坐标系

4.3 效果图

五 显示当前位置的名称

5.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
</map>

5.2 样式文件(map.wxss)

cover-view.currentName{
  text-align: center;
  background-color: green;
  padding: 3%;
  color: white;
}

5.3 逻辑文件(map.js)

data: {
    scale: '16',
    markers: null,
    longitude: null, // 地图中心点经度
    latitude: null, // 地图中心点纬度
    currentName: ''
  },
  getPositionName(longitude, latitude) {
    qqmapsdk.reverseGeocoder({
      location: {
        latitude: latitude,
        longitude: longitude
      },
      success: res => {
        //console.log('定位信息', res)
        this.setData({
          currentName: res.result.address
        })
      },
      fail: res => {
        this.setData({
          currentName: '定位失败'
        })
      }
    })
  },

5.4 效果图

六 点击GPS图标，回到定位位置

6.1 布局文件(map.wxml)

<map  id="mapId" bindregionchange="bindRegionChange"  longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
<cover-view class="currentName" marker-id="1">{{currentName}}</cover-view>
    <cover-view class="gps" marker-id="2">
    <cover-image src="/images/gps.png" bindtap="setPosition"></cover-image>
  </cover-view>
</map>

6.2 样式文件(map.wxss)

cover-view.gps{
  position: absolute;
  bottom: calc(5%);
  right: calc(5%);
}

6.3 逻辑文件(map.js)

 setPosition: function () {
    // 将地图中心移动到当前定位点
    this.mapCtx.moveToLocation()
  }

6.4 效果图

七 参考代码

• 参考代码