人生为什么要做三道终极哲学题：早餐吃什么，午餐吃什么，晚餐吃什么，这个问题困扰过很多像我这样的哲学家（不要脸），每天工作到一半，思考这个哲学问题。鲁迅曾经说过：一个人天天不知道吃什么，跟咸鱼有什么区别！所以，为了不做咸鱼，他要做一条最好吃的烤鱼，呸，他要做一条最美的鲤鱼，在信仰下，我有想法让程序帮我选择今天吃什么。下面说说具体的实现过程和原理。咸鱼翻身——实现过程并不复杂，主要是利用高德地图的api获取业务数据，然后对数据进行进一步的处理。实现原理是利用高德地图的定位功能找到你所在的位置，然后通过附近商户的搜索功能收集一定范围内附近商户的信息，然后随机选择一家餐厅完成咸鱼唱歌。准备实现需要先到高德开放平台，申请权限，然后到控制台新建一个应用，申请要使用的密钥。目前我用的是免费版，每天有30000次调用的限制，但是对于我的玩具应用来说，已经足够了，具体的申请流程不再赘述。一颗宁愿饿死也不做咸鱼的心，通过查阅高德地图的信息，找到需要配置的参数，了解相关参数的含义和可配置的范围，实现实现过程。实现当前定位需要调用高德地图的api，必须在页面中引入，并且必须在head标签中引入，否则会报错然后添加配置module.exports={configureWebpack:{externals:{AMap:'AMap'}}};在vue.config.js完成插件的引入后，开始定位，获取你当前所在位置的经纬度。//获取当前位置getLocation(){constthat=this;AMap.plugin('AMap.Geolocation',()=>{vargeolocation=newAMap.Geolocation({//是否使用高精度定位，默认：trueenableHighAccuracy:true,timeout:10000,});geolocation.getCurrentPosition();AMap.event.addListener(geolocation,'complete',(data)=>{//console.log('Latitude:',data.position.lat);//console.log('longitude:',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('获取位置失败');});});},高德地图定位，默认首选IP精准定位PC端，IP定位失败后使用浏览器定位；移动端首选浏览器定位，失败后使用IP定位。这里需要注意的是，由于Chrome、IOS10等不再支持非安全域的浏览器定位请求，需要将站点升级为https以保证定位的准确性。获取店铺信息并完成定位后，需要拼接请求的API获取商户数据。//获取附近店铺信息getData(){consturl=`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-数组长度)之间的随机数，这个随机数就是当前所有店铺信息中选择的一个，即我们要A店吃。//随机选择一个店铺randomShop(){if(!this.fullShopData||this.fullShopData.length===0){//console.log('附近没有店铺或获取店铺数据失败');this.$Notice.info({title:'附近没有店铺信息，我们吃点正常的！',});返回假；}consttotal=this.fullShopData.length;//数据长度constrandomIndex=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:'Cafe',value:'050500',types:[{name:'星巴克咖啡',value:'050501'},{name:'商岛咖啡',value:'050502'},{name:'PacificCoffeeCompany',value:'050503'},{name:'ParisCoffeeShop',value:'050504'}]}，然后通过监听第一个类目值的变化得到当前选中的item，然后筛选并筛选所有大类数据，找到当前item的类型，然后将当前item的类型作为子类的数据源。
