我们在前两篇教程中实现咖啡店列表和点标记的筛选过滤功能，这篇教程与前面教程没啥关系，可以算作是针对 Roast 应用的两个优化项。 优化多点标记高德地图信息窗体显示 我们在之前实现了在高德地图上点击点标记显示信息窗体的功能，不过那个窗体有点太简陋了，只显示了咖啡店的名称，我们可以通过编写 HTML 内容片段为信息窗体提供更加丰富的显示信息，打开 assets/js/components/...
在上一篇教程中我们在应用首页通过 Vue Mixins 实现了对咖啡店的筛选过滤，在这篇教程中，我们将复用上一篇教程中的过滤处理函数通过 Vue Mixins 实现在高德地图上对咖啡店点标记进行筛选过滤的功能，实现思路和上篇教程类似，只不过前者是对列表数据进行过滤，而本篇教程是在地图上对点标记进行过滤。 第一步：创建高德地图过滤组件 和上篇教程的 CafeFilter 组件类似，我们首先...
随着咖啡店数量的增多，需要按照指定条件对咖啡店进行过滤筛选，才能找到心仪的咖啡店。由于我们现在在应用首页已经将所有咖啡店数据一次性返回了，所以现在我们在前端基于 Vue 对咖啡店进行过滤，当然，随着数据的进一步增大，筛选过滤功能必须集合后端 API 实现，但是对于目前数据量来说，前端处理就可以了。 我们将基于以下几个维度对数据进行过滤： 文本搜索 标签选择 是否是烘焙店 冲泡方法 我...
在上一篇教程中，我们已经实现咖啡店标签的后端 API 接口用于实现标签的查询、新增和删除，在这篇教程中，我们来实现标签的前端输入、提交和显示。 第一步：新增标签输入组件 我们将通过创建一个 Vue 组件来实现标签的输入，使用组件的好处是方便标签输入组件的复用，在 resources/assets/js/components/global 目录下新增一个 forms 子目录，然后在 for...
接下来的两篇教程中，我们会咖啡店实现打标签功能，这个标签与咖啡店、标签和用户相关联，我们将最终根据用户为每个咖啡店标记的标签数量为排序条件为每个咖啡店构建标签云，由于功能相对而言比较复杂，我们分两篇教程来实现，首先实现后端相关 API 接口，从后端角度来说，这也是一个多对多关联，只不过在中间表中需要引入用户 ID 以便区分不同用户打的标签。 实现标签系统后，我们就可以通过多种维度对咖啡店...
对很多应用而言，尤其是社交媒体类应用，都有喜欢或收藏功能，在这篇教程中，我们就来演示如何基于 Laravel 和 Vue 从前端到后端完整实现喜欢/取消喜欢咖啡店功能。 在上一篇教程中我们构建了咖啡店之间的父子关联关系，并且在更早的教程中构建了咖啡店与冲泡方法之间的多对多关联，而在这篇教程中，我们将构建基于用户和咖啡店的另一个多对多关联关系：一个咖啡店可以被多个用户喜欢，一个用户也可以喜...
上一篇教程中，我们创建了相应的数据表结构来存储咖啡店与冲泡方法的多对多关联以及获取方法，现在我们需要在其基础上来调整新增咖啡店表单：由于一个咖啡店可能有多个分店，我们可能需要多个位置字段（具体数目未知），因此需要一个动态表单。通过 Vue.js 我们可以轻松实现这样的动态表单。 第一步：构思新的 NewCafe.vue 组件功能 很显然，我们需要对 NewCafe.vue 表单组件进行重...
在前面的教程中，我们已经陆续完成了咖啡店的添加和在高德地图上的标记，接下来我们会实现一些更加复杂的功能，在实现这些功能之前，需要先准备好数据结构，因为一个咖啡店可能会提供多种冲泡方法，单个冲泡方法本身也不隶属于任何咖啡店，所以在这篇教程中，我们将通过 Laravel Eloquent 模型类的多对多关联来构建咖啡店和对应冲泡方法之间的关联关系，有关多对多关联的实现，可以先阅读下官方文档。...
在上一篇教程中我们已经成功将咖啡店显示到高德地图中，除此之外，我们还可以基于高德地图提供的 JS API 实现更多的高级功能，比如自定义点标记图标，点击点标记图标展示信息窗体等，本篇教程我们将以这两个案例为例进行演示，希望可以抛砖引玉，帮助你快速学会如何使用高德地图 JS API 实现自己需要的高级功能。 自定义点标记 在开始之前，你可以快速浏览下高德地图自定义点标记的 JS API 文...
在上一篇教程中我们为咖啡店地址进行了地理编码，这样，就可以调用高德地图支持的各种 API 来实现我们想要实现的功能（地图服务都是基于地理编码来实现），在这篇教程中，我们将基于地理编码在地图上标记咖啡店，我们将通过在 Cafes 页面中包含地图组件来实现这个功能。 第一步：获取高德地图 JS API Key 由于是在前端实现地图标记功能，所以需要申请高德地图的 JS API Key，在上一...
