共计 3374 个字符，预计需要花费 9 分钟才能阅读完成。
为什么要做
人的毕生中三个终极的哲学问题：
- 早饭吃什么
- 中饭吃什么
- 晚饭吃什么
这个问题不晓得困扰了多少像我一样的哲学家（不要脸），每天工作到一半，就在思考这哲学问题。鲁迅 说过：
不晓得每天吃什么的人跟咸鱼有什么区别 !
于是，为了不当咸鱼，秉着要当就要当最最香的烤鱼，呸，要当就当最靓的鲤鱼的信念下，就有了让程序帮我选明天吃什么的想法。上面说下具体的实现过程及原理。
咸鱼翻身记 - 实现
实现的过程不简单，次要是利用高德地图的 api 获取商家数据，而后再对数据做进一步的解决。
实现原理
利用高德地图的定位性能找到本人所处地位，而后通过搜寻左近商家性能，收集到左近肯定范畴内的商家的信息，而后随机筛选一家餐饮店，实现咸鱼翻身把歌唱。
实现筹备
- 须要去高德开放平台，申请应用权限，而后去控制台新建利用，申请应用的 key，目前我应用的是免费版，每天有 3 万次的调用限度，不过对于我这个玩具利用来说，曾经足够了，具体的申请过程就不再赘述了。
- 一颗宁肯饿死都不做咸鱼的心
实现过程
通过查阅高德地图的材料，找到须要配置的参数，理解相干参数的含意以及可配置范畴。
实现以后定位
须要调用高德地图的 api, 在页面中引入, 肯定要在 head 标签中引入，不然会报错
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key= 你本人申请的 key"
></script>而后在 vue.config.js 中增加配置
module.exports = {
configureWebpack: {
externals: {AMap: 'AMap'}
}
};这样就实现插件的引入了，开始定位，获取到本人以后所处地位的经度纬度。
// 获取以后地位
getLocation() {
const that = this;
AMap.plugin('AMap.Geolocation', () => {
var geolocation = new AMap.Geolocation({
// 是否应用高精度定位，默认：true
enableHighAccuracy: true,
timeout: 10000,
});
geolocation.getCurrentPosition();
AMap.event.addListener(geolocation, 'complete', (data) => {// console.log('纬度:', data.position.lat);
// console.log('经度:', data.position.lng);
that.lat = data.position.lat;
that.lng = data.position.lng;
// 查问店铺信息
this.getData();});
AMap.event.addListener(geolocation, 'error', (err) => {console.log(err);
console.log('获取定位失败');
});
});
},
高德地图的定位在默认状况下，PC 端优先应用准确 IP 定位，IP 定位失败后应用浏览器定位；手机端优先应用浏览器定位，失败后应用 IP 定位。这里要留神的是，因为 Chrome、IOS10 等已不再反对非平安域的浏览器定位申请，须要将站点降级到 https 能力保障定位的精确度。
获取店铺信息
实现定位后须要拼接申请的 api 来获取到商家数据。
// 获取左近店铺信息
getData() {
const url = `https://restapi.amap.com/v3/place/around? 这里跟具体的参数信息, 参数配置可查高德文档 `;
axios(url)
.then((res) => {// console.log(res.data.pois);
this.fullShopData = res.data.pois;
})
.catch((err) => {console.log(err);
console.log('获取店铺信息失败');
});
},
而后获取随机数据。
随机抽取店铺
通过获取到店铺信息的数组的长度，而后在 [0- 数组长度）之间生成一个随机数，这个随机数就是以后所有店铺信息中被选中的天之骄子，也就是咱们明天要去吃饭的店铺。
// 随机抽取一家店铺
randomShop() {if (!this.fullShopData || this.fullShopData.length === 0) {// console.log('左近无店铺或者获取店铺数据失败');
this.$Notice.info({title: '左近无店铺信息，吃点失常的货色吧!',});
return false;
}
const total = this.fullShopData.length; // 数据长度
const randomIndex = this.random(0, total); // 随机数组下标
this.shopName = this.fullShopData[randomIndex].name; // 店名
this.distance = this.fullShopData[randomIndex].distance; // 间隔
this.address = this.fullShopData[randomIndex].address; // 地址
this.isChose = true;
},
这样，一个最小可用的版本曾经做好了。然而有时候本人又有点想法，不想做程序的奴隶，于是就须要对随机的范畴进行更加准确的配置。
配置项开发
配置项次要有对类别，搜寻半径，关键词的配置，具体没什么好说的，次要是对接口参数的从新赋值，这里拿一个数据联动的例子说一下，在抉择想要吃的餐馆类别中，须要选中一个大类，再对他的子类进行筛选。这里的分类是基于高德地图的 POI 分类编码, 进行分类的，依据以上的需要信息，结构一个合乎需要的数据结构。
{
name: '咖啡厅',
value: '050500',
types: [
{
name: '星巴克咖啡',
value: '050501'
},
{
name: '上岛咖啡',
value: '050502'
},
{
name: 'Pacific Coffee Company',
value: '050503'
},
{
name: '巴黎咖啡店',
value: '050504'
}
]
},
而后通过监测第一个大类的变动，获取到以后的选中项的 value, 而后再跟所有的大类数据进行筛选甄别，找到以后项的 types, 再把以后项的 types 作为子类的数据起源。
<Select @on-select="selectFirstType" v-model="formData.firstType" placeholder="请抉择一个大类">
<Option v-for="(item, index) in typeList" :value="item.value" :key="index">{{item.name}}</Option>
</Select> // 筛选大类
selectFirstType(val) {
// 筛选出以后选中项的数据，不便取子项目
const result = this.typeList.filter((item) => item.value === val.value);
this.restaurantList = result[0].types;
this.apiOption.types = val.value;
this.disableChose = false;
},我的项目部署
我的项目是通过 netlify 部署的，netlify 非常适合疾速部署一些动态网站，只须要把本人 build 好的 dist 包上传至 netlify 上的个人主页，再配置下域名，就能实现公布部署，十分轻量，可配置项也特地多。这是这个我的项目的线上版本 https://createforyou.netlify.app/#/
咸鱼翻身记 - 最初
忽然又想到一个场景，当可恶的程序猿小张跟女生小莉进来约会的时候。
程序猿小张: 你想吃什么？
女生小莉：轻易。
如果小张有抉择艰难症，听到轻易两个字，心中是啥状态？所以这个时候你就能够施展你的程序猿本色，现场给他撸一个随机抉择程序，而后吃饭的时候跟她讲你撸程序的过程，我置信，你们肯定会度过一个高兴的时光的。
光棍节高兴，连忙跑，小命要紧（狗头）！
源码在这 Gayhub , 最初附上效果图
