微信小程序开发之——附近酒店-实现(2)，程序员真的是吃青春饭吗
},
3.5 效果图
四 搜索附近的酒店(markers)
4.1 布局文件(map.wxml)
说明：
-
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 objec
t)：获取当前地图中心的经纬度。返回的是 gcj02 坐标系
4.3 效果图
五 显示当前位置的名称
5.1 布局文件(map.wxml)
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)
{{currentName}}
ndRegionChange" longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" scale="{{scale}}" show-location>
{{currentName}}