微信小程序开发之——附近酒店-实现(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}}