关于前端:Vue-Amap咸鱼翻身记之今天吃什么

人的毕生中三个终极的哲学问题：

早饭吃什么
中饭吃什么
晚饭吃什么

这个问题不晓得困扰了多少像我一样的哲学家（不要脸），每天工作到一半，就在思考这哲学问题。鲁迅说过：

不晓得每天吃什么的人跟咸鱼有什么区别 !

于是，为了不当咸鱼，秉着要当就要当最最香的烤鱼，呸，要当就当最靓的鲤鱼的信念下，就有了让程序帮我选明天吃什么的想法。上面说下具体的实现过程及原理。

实现的过程不简单，次要是利用高德地图的 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 , 最初附上效果图

关于前端:Vue-Amap咸鱼翻身记之今天吃什么

为什么要做

咸鱼翻身记 - 实现

实现原理

实现筹备

实现过程

实现以后定位

获取店铺信息

随机抽取店铺

配置项开发

我的项目部署

咸鱼翻身记 - 最初