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

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)

说明：

• 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)

最后

其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

上面分享的腾讯、头条、阿里、美团、字节跳动等公司2019-2021年的高频面试题，博主还把这些技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，上面只是以图片的形式给大家展示一部分。

【Android思维脑图（技能树）】

知识不体系？这里还有整理出来的Android进阶学习的思维脑图，给大家参考一个方向。

【Android高级架构视频学习资源】

Android部分精讲视频领取学习后更加是如虎添翼！进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水，赶快领取吧！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
oid进阶学习的思维脑图，给大家参考一个方向。

[外链图片转存中…(img-qsFo4U0g-1715277499548)]

【Android高级架构视频学习资源】

Android部分精讲视频领取学习后更加是如虎添翼！进军BATJ大厂等（备战）！现在都说互联网寒冬，其实无非就是你上错了车，且穿的少（技能），要是你上对车，自身技术能力够强，公司换掉的代价大，怎么可能会被裁掉，都是淘汰末端的业务Curd而已！现如今市场上初级程序员泛滥，这套教程针对Android开发工程师1-6年的人员、正处于瓶颈期，想要年后突破自己涨薪的，进阶Android中高级、架构师对你更是如鱼得水，赶快领取吧！
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！