vue 给圆遮盖物添加文字 高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...

通过 Vue + 高德地图 JS API 在地图上标记咖啡店

由 学院君 创建于2年前, 最后更新于 2年前

版本号 #1

在上一篇教程中我们为咖啡店地址进行了地理编码，这样，就可以调用高德地图支持的各种 API 来实现我们想要实现的功能(地图服务都是基于地理编码来实现)，在这篇教程中，我们将基于地理编码在地图上标记咖啡店，我们将通过在 Cafes 页面中包含地图组件来实现这个功能。

第一步：获取高德地图 JS API Key

由于是在前端实现地图标记功能，所以需要申请高德地图的 JS API Key，在上一篇教程创建的应用中添加 Key，在弹出页面选择「Web端」即可：

创建完成后即可在应用 Key 列表中看到了。

第二步：将 API Key 添加到 config.js 中

和 Laravel 后端类似，接下来我们将上一步申请的 JS API Key 添加到前端配置文件 resources/assets/js/config.js 中，以便可以全局使用：

/**

* Defines the API route we are using.

*/

var api_url = '';

var gaode_maps_js_api_key = '{YOUR API KEY HERE}';

switch( process.env.NODE_ENV ){

case 'development':

api_url = 'http://roast.t