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

发表于 分类于 ， ， 阅读时长 ≈ 4 分钟

一 概述

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

二 腾讯地图sdk配置

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

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

1
https://apis.map.qq.com

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

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

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

3.1 布局文件(map.wxml)

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

3.2 样式文件(map.wxss)

1
2
3
4
map{
  height: 100vh;
  width: 100vw;
}

3.3 逻辑文件(map.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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)

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

3.5 效果图

四 搜索附近的酒店(markers)

4.1 布局文件(map.wxml)

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

说明：

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

4.2 逻辑文件(map.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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)

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

5.2 样式文件(map.wxss)

1
2
3
4
5
6
cover-view.currentName{
  text-align: center;
  background-color: green;
  padding: 3%;
  color: white;
}

5.3 逻辑文件(map.js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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)

1
2
3
4
5
6
<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)

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

6.3 逻辑文件(map.js)

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

6.4 效果图

七 参考代码

  • 参考代码