基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十五) —— 优化高德地图多个点标记信息窗体显示 & 引入 Google Analytics 进行单页面应用访问统计

我们在前两篇教程中实现咖啡店列表和点标记的筛选过滤功能,这篇教程与前面教程没啥关系,可以算作是针对 Roast 应用的两个优化项。 优化多点标记高德地图信息窗体显示 我们在之前实现了在高德地图上点击点标记显示信息窗体的功能,不过那个窗体有点太简陋了,只显示了咖啡店的名称,我们可以通过编写 HTML 内容片段为信息窗体提供更加丰富的显示信息,打开 assets/js/components/...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(二十四) —— 使用 Vue Mixins 在高德地图上对咖啡店点标记进行筛选过滤

在上一篇教程中我们在应用首页通过 Vue Mixins 实现了对咖啡店的筛选过滤,在这篇教程中,我们将复用上一篇教程中的过滤处理函数通过 Vue Mixins 实现在高德地图上对咖啡店点标记进行筛选过滤的功能,实现思路和上篇教程类似,只不过前者是对列表数据进行过滤,而本篇教程是在地图上对点标记进行过滤。 第一步:创建高德地图过滤组件 和上篇教程的 CafeFilter 组件类似,我们首先...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十七) —— 在高德地图上自定义咖啡店点标记图标并显示信息窗体

在上一篇教程中我们已经成功将咖啡店显示到高德地图中,除此之外,我们还可以基于高德地图提供的 JS API 实现更多的高级功能,比如自定义点标记图标,点击点标记图标展示信息窗体等,本篇教程我们将以这两个案例为例进行演示,希望可以抛砖引玉,帮助你快速学会如何使用高德地图 JS API 实现自己需要的高级功能。 自定义点标记 在开始之前,你可以快速浏览下高德地图自定义点标记的 JS API 文...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十六) —— 通过 Vue + 高德地图 JS API 在地图上标记咖啡店

在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的各种 API 来实现我们想要实现的功能(地图服务都是基于地理编码来实现),在这篇教程中,我们将基于地理编码在地图上标记咖啡店,我们将通过在 Cafes 页面中包含地图组件来实现这个功能。 第一步:获取高德地图 JS API Key 由于是在前端实现地图标记功能,所以需要申请高德地图的 JS API Key,在上一...

基于 Laravel + Vue 构建 API 驱动的前后端分离应用系列(十五) —— 通过高德地图 Web 服务 API 对咖啡店地址进行地理编码

打开后续各种 LBS 功能大门的钥匙是首先将咖啡店的物理地址转化为地图上的经纬度格式,这个过程叫做地理编码(Geocode)。我们可以通过多种方式来实现地理编码,高德地图、百度地图、Google地图这些地图服务都提供了开放的 API,由于学院君之前用过一次高德地图的 API,所以这里以高德地图为例进行演示,其他地图服务实现思路完全一样。 在上一篇教程中,我们对提交过来的咖啡店数据进行了验...