通过 CDN 的方式我们可以很容易地使用 vue-amap 写出一个 Hello world 页面。

什么是CDN？

定义是这样的：CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

通俗的说就是：在本例子中调用网络上的js

代码如下

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>demo | vue-amap</title>
  5.     <meta charset="UTF-8">
  6.   </head>
  7.   <body>
  8.     <div id="app">
  9.       <el-amap vid="amap"></el-amap>
  10.     </div>
  11.   </body>
  12.   <!-- 先引入 Vue -->
  13.   <script src="https://unpkg.com/vue/dist/vue.js"></script>
  14.   <!-- 引入组件库 -->
  15.   <script src="https://unpkg.com/vue-amap/dist/index.js"></script>
  16.   <script>
  17.     // 初始化高德地图的 key 和插件
  18.     window.VueAMap.initAMapApiLoader({
  19.       key: 'YOUR_KEY',
  20.       plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],
  21.       // 默认高德 sdk 版本为 1.4.4
  22.       v: '1.4.4'
  23.     });
  25.     new Vue({
  26.       el: '#app',
  27.       data: function(){
  28.         return { }
  29.       }
  30.     });
  31.   </script>
  32. </html>

这边要注意的是： 在js中 key需要去高德地图api中去申请

还有一点注意的是，我们输入key之后正常运行的情况下已经把地图加载到了页面，但是需要设置一下宽高才能看到。

看完有帮助记得点个赞！

vue-amap接入高德地图示例的更多相关文章

  1. Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能（使用Android Studio）详细操作

    刚进公司给安排的任务就是Unity接入高德地图,算是踩了不少坑总算做出来了,抽点时间写个博客记录一下 废话不多说 先上效果图 获取定位并根据手机朝向显示周边信息            使用的Unity ...

  2. 在vue中使用高德地图开发，以及AMap的引入？

    百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...

  3. 在vue中使用高德地图vue-amap

    1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...

  4. VUE组件 之 高德地图地址选择

    注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...

  5. 如何在vue里面调用高德地图

    1.修改webpac.base.conf.js文件 与module同一级添加 externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' }配置. 然后在index ...

  6. vue+vant ui+高德地图的选址组件

    首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...

  7. react项目中引用amap（高德地图）坑

    最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直 ...

  8. vue项目接入百度地图

    方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址:https://dafrok.github.io/vue-bai ...

  9. vue.js 使用高德地图

    1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件  webpack.base.conf.js externa ...

  10. vue 里面引入高德地图

    效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...

随机推荐

  1. Windows 新建用户帐户

    Windows 近年来大力推广使用 Microsoft 帐户登录 Windows.然而,如果你这么做了,Windows 会取你登录帐户的前 5 个字母作为你的本地用户名,非常的丑陋.更难受的是本地用户 ...

  2. 【笔记】理解CSS3之Flexbox布局

    前言 先看一个例子,html代码如下: <ul> <li>1</li> <li>2</li> <li>3</li> ...

  3. SPiT：超像素驱动的非规则ViT标记化，实现更真实的图像理解 | ECCV 2024

    Vision Transformer(ViT) 架构传统上采用基于网格的方法进行标记化,而不考虑图像的语义内容.论文提出了一种模块化的超像素非规则标记化策略,该策略将标记化和特征提取解耦,与当前将两者 ...

  4. ASP.NET Core – CORS (Cross-Origin Resource Sharing)

    参考 Docs – Enable Cross-Origin Requests (CORS) in ASP.NET Core 介绍 CORS (Cross-Origin Resource Sharing ...

  5. .NET 开源工业级移动端仓库管理系统

    前言 在工业生产中,定制化的软件对于每个环节都至关重要.对于仓库管理,推荐一款开源的仓库管理系统(WMS)解决方案. 这款基于.NET 框架开发的移动应用,提供了全面的仓库操作.订单处理.主数据管理. ...

  6. HTTP——简介

    HTTP   

  7. 使用 Flutter 加速应用开发

    作者 / Larry McKenzie 本文由 eBay 技术负责人 Larry Mckenzie 和 Corey Sprague 撰写.您可以收听他们在 Google Apps, Games &am ...

  8. MoNA：复用跨模态预训练模型，少样本模态的福音 | ICML'24

    跨模态转移旨在利用大型预训练模型来完成可能不属于预训练数据模态的任务.现有的研究在将经典微调扩展到跨模态场景方面取得了一定的成功,但仍然缺乏对模态差距对转移的影响的理解.在这项工作中,进行了一系列关于 ...

  9. .net 泛型 Generic

    什么是泛型 就是不确定的类型

  10. 49.var声明的函数和function声明的函数谁的优先级更高

    function 声明函数的优先级更高 : 因为 function声明函数的时候,是在代码解析之前赋值给变量,此时就已经可以调用了 : 但是var 声明的函数,要在代码运行阶段才会赋值给变量,这个时候 ...