vue中使用高德地图

原创

已于 2022-08-01 18:05:49 修改 · 807 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #js #html

于 2020-11-20 17:48:00 首次发布

本文介绍了如何在Vue项目中集成高德地图，包括在`index.html`中引入CDN，`vue.config.js`的配置调整，以及在具体组件中使用地图API进行调试。

vue中使用高德地图

在vue项目中找到index.html，添加高德地图的cdn，一般放在public文件夹下

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=你申请的key"></script>

2.在vue.config.js中添加以下代码（配置文件修改后需要重启项目）

module.exports = {
   
   
  configureWebpack: {

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mr小曹

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue2如何引入高德地图/Vue2如何封装一个有高德地图的组件/Vue2如何将高德地图渲染到页面中/Vue2如何引入高德地图3D显示

TIG_JS的博客

06-10

1258

Vue2如何引入高德地图/Vue2如何封装一个有高德地图的组件/Vue2如何将高德地图渲染到页面中/Vue2如何引入高德地图3D显示

学会在Vue项目中插入高德地图JS API与地图的相关设置，看这一篇就够了~（保姆级精简教学）

bsegebr的博客

03-02

1700

高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API****结合 Vue 展开介绍。一、案例效果二、开发准备需要注意想要使用 JS API 必须注册账号并获取 key 值。 1. 注册高德开放平台账号正常输入个人信息注册即可。 2. 创建应用添加 key 值注册成功之后，进入控制台，然后点击创建新应用；填写名称应用名称和类型之后就可以看到已创建的应用了；接下来点击“添加”为应用添加 key 值

参与评论您还未登录，请先登录后发表或查看评论

在vue中集成高德地图amap-jsapi-loader

weixin_40381947的博客

05-29

4546

这里使用的是amap-jsapi-loader。@amap/amap-jsapi-loader是一个用于加载高德地图JavaScript API的工具库。它可以帮助开发者快速、简便地在网页中引入高德地图API，并提供了一些方便的配置选项和回调函数，以便开发者更好地控制地图的加载和初始化过程。该工具库适用于各种前端框架和库，如React、Vue、Angular等。

Vue中引入高德地图cdn链接方式汇总（可按需加载）

ProgramarQin的博客

04-30

6156

随着时间流逝，人的初心是否会改变呢？今日博客分享vue引入高德地图几种方式~ 1、方式一，引用封装好的vue-amap组件，具体操作见官方文档官网链接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install npm install vue-amap --save 由于vue-amap封装的功能有限，因此不可避免的需...

vue中引入高德地图

前端-尔嵘

12-31

2万+

总的来说，vue组件中使用高德地图的方式有两种，一种是vue-amap ：一套专门用于vue的高德地图插件；另外一种是原生的高德地图。方式一、vue-amap：官网API：直达车 (1)、安装依赖： npm install vue-amap -S 或者淘宝镜像： cnpm install vue-amap -save 亦或（CDN的方式获取最新版本的资源）： <sc......

精选资源

vue中使用高德地图-加载高德地图几种方法

03-12

### vue中使用高德地图-加载高德地图几种方法 #### 一、前言与基础知识在当前的应用开发中，地图服务已经成为了不可或缺的一部分。无论是网约车应用还是生活服务类应用，地图服务都提供了强大的功能支持。本文将...

精选资源

vue中使用高德地图（JSAPI2.0示例）

04-28

参考高德地图官网的示例实现的。

vue——vue中使用高德地图弹窗获取并修改定位

最新发布

小灰灰

10-22

1690

1.获取 key 和密钥。 2.依赖包安装。 3.插件的使用。

vue.js高德地图实现热点图代码实例

10-17

在本文中，我们将深入探讨如何使用Vue.js与高德地图API来实现热点图的功能。热点图是一种有效的数据可视化工具，可以展示特定区域内数据点的密集程度。以下是对标题和描述中涉及的知识点的详细说明： 1. **Vue.js**...

在vue中高德地图引入和轨迹的绘制的实现

01-21

高德地图引入和轨迹的绘制 1.第一步 vue中使用cdn引入高德地图，并在main.js中进行全局配置。（百度上有高德地图引入与配置方法，这里就不详细介绍）； 1） npm install vue-amap --save 2） import VueAMap from ‘vue-amap' Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: ‘********************',//自己在高德地图平台上的key值 plugin: [‘AMap.Autocomplete', ‘AMap.PlaceSearch', ‘AMap.Scal

高德地图+插件再vue2中的使用

2301_77297854的博客

07-15

419

【代码】高德地图+插件再vue2中的使用。

前端系列——vue2+高德地图web端开发（使用和引入）

weixin_55683934的博客

04-19

3580

文章有参考其他博主的如有雷同纯属巧合！！

CDN vue 调用高德地图api

Yweir的博客

03-15

729

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script

vue-amap中添加高德地图地图的自定义样式

热门推荐

web前端学习总结

08-20

3万+

vue-amap中添加高德地图地图的自定义样式 高德地图的自定义样式列表：使用： amap://styles/+ 样式的名称如：使用标准颜色 amap://styles/normal 依次类推标准 normal 幻影黑 dark 月光银 light 远山黛 whitesmoke 草色青 fresh 雅士灰 grey 涂鸦 graffiti 马卡龙 maca...

vue项目中使用CDN引入

zz130428的博客

12-25

1万+

CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。

vue项目中通过cdn引入资源并配置

jiangjunyuan168的博客

04-19

1万+

概念 cdn(内容分发网络)是一种通过互联网相互连接的电脑网络系统，当用户向cdn链接请求资源时，cdn会利用最靠近用户的服务器来给用户返回资源。作用使用cdn能实现用户不需要在项目中通过npm下载其他资源（如第三方库），直接通过请求cdn服务器，服务器返回后即可使用，这样就减小了打包时包的大小，项目的首屏加载也能过更快。引用资源及配置话不多说，下面对vue项目中常用的资源进行cdn引用及配置（vue、vuex、vue-router、axios、elementUI） 1、引入可在项目中的index