一 概述
- 腾讯地图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()
}