我正在参加「创意开发 投稿大赛」详情请看：掘金创意开发大赛来了！
前几天上班摸鱼刷沸点，突然看到有个掘友提了一个问题：
“每天最大的难题，就是：中午吃什么+晚上吃什么”
我也有同感，虽然网上经常有随机生成吃什么的软件，或者一个简单的gif动图进行截图就可以完成随机，但是有极大的概率你所抽到的食物附近没有啊，总不能为了一顿烤鸭再开车去吃吧（当然如果是烤鸭我愿意……）
那么，可不可以写一个这样的程序，输入你的地理位置，在附近找到所有餐饮的选项，再进行随机，这样的实用性就高得多了吧，说干就干！
选择地图服务
说起地图API，国内常用的应该就是百度和高德了，我本来想用百度，但是百度实名认证居然还要下载它的APP，于是我转而选择了高德，反正这么简单的功能谁都能做到，看了下API文档，选用webAPI就够了，仅需要两个功能：
注册高德开发者，使用支付宝验证身份之后就可以使用了，创建应用，创建新的key，选择web服务：
关键字搜索和周边搜索搜索就是我们需要的了。
测试接口
高德的webAPI就是传入你的accessKey调用一个接口即可，首先是关键字搜索： 关键字搜索API服务地址：
| URL | restapi.amap.com/v3/place/te… |
|---|---|
| 请求方式 | GET |
| 参数 | keywords-查询关键字 |
使用postman测试：
成功搜索到经纬度（因为懒得做城市筛选，搜索关键词多写个城市吧）
然后是周边搜索：
| URL | restapi.amap.com/v3/place/ar… |
|---|---|
| 请求方式 | GET |
| 参数 | location-经纬度、types-地点类型编码、radius-查找半径 |
其中地点类型编码需要下载高德官方的文档查看，餐饮大类是050000，但是大类里包含了咖啡厅蛋糕店之类的，所以我后来选择了050100|050200|050300 中餐厅|西餐厅|休闲餐厅三个小类，这个参数传入多个值时用|分隔，查找半径自己设置就好了单位是米
使用postman测试：
前端处理
整个页面的操作流程是：
- 输入自己地名搜索地点
- 选择地点
- 查找附近餐饮
- 勾选需要随机的餐饮
- 展示结果
为了避免输入时频繁调用API（毕竟免费的限制次数），加了个防抖：
export default {
data() {
return {
//...
debounceTime: null, //输入框防抖
//...
}
},
watch: {
keywords: {
handler(val) {
clearTimeout(this.debounceTime)
setTimeout(() => {
if (val) {
axios.get(`https://restapi.amap.com/v3/place/text?key=${AMAP_AK}&keywords=${val}`).then(response => {
this.posList = response.data.pois;
})
}
else {
this.posList = [];
}
},800)
}
}
},
}
复制代码选择地点之后，输入范围，点击查找出现附近餐饮：
默认勾选所有新出现的结果：
export default {
data() {
return {
//..
keywords: "", // 地点搜索关键词
posList: [], // 地点列表
selectedPost: {}, // 已选择的地点
radius: 2000, // 搜索半径
mealList: [],
selectMealList: [], // 勾选的餐饮列表
result: "", // 最终选择的结果
page:1, //结果查找页码
hasMore: true
}
},
methods:{
searchNear() {
if (!this.selectedPost.name) {
Toast("请选择地点后进行搜索")
return;
}
axios.get(`https://restapi.amap.com/v3/place/around?key=${AMAP_AK}&location=${this.selectedPost.location}&types=050100|050200|050300&radius=${this.radius || 2000}&offset=25&page=1`).then(response => {
this.mealList = response.data.pois;
this.selectMealList = this.mealList.map(item => item.name);//默认全部选中
})
},
moreMeal() {
this.page++
axios.get(`https://restapi.amap.com/v3/place/around?key=${AMAP_AK}&location=${this.selectedPost.location}&types=050100|050200|050300&radius=${this.radius || 2000}&offset=25&page=${this.page}`).then(response => {
let data = response.data.pois;
if (!data.length) {
this.hasMore = false;
}
this.mealList.push(...data);
this.selectMealList.push(...data.map(item => item.name))
})
}
}
复制代码点击“我要吃啥！”按钮，使用Math.random()来取出一个餐厅：
rollMeal() {
this.result =
this.selectMealList[
Math.floor(Math.random() * this.selectMealList.length)
];
}
复制代码这个原理就是Math.random()返回的是在[0,1)的半开半闭区间的一个数字，乘以数组长度都后向下取整正好就是数组内所有的索引：
使用
直接访问我部署好的页面（但我的api调用次数有限每天用的多了可能就不能用了）：xiaoxideai.ren/todayMeal
或者去github.com/zhzhch335/t… 克隆项目，自己按照上面的步骤注册一个高德应用生成accessKey，然后去APP.vue文件里替换AMAP_AK常量为你自己的accessKey，之后运行下面命令即可:
npm i
npm run serve
复制代码吃饺子去咯！