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

什么是CDN？

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

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

代码如下

<!DOCTYPE html>

<html>

  <head>

    <title>demo | vue-amap</title>

    <meta charset="UTF-8">

  </head>

  <body>

    <div id="app">

      <el-amap vid="amap"></el-amap>

    </div>

  </body>

  <!-- 先引入 Vue -->

  <script src="https://unpkg.com/vue/dist/vue.js"></script>

  <!-- 引入组件库 -->

  <script src="https://unpkg.com/vue-amap/dist/index.js"></script>

  <script>

    // 初始化高德地图的 key 和插件

    window.VueAMap.initAMapApiLoader({

      key: 'YOUR_KEY',

      plugin: ['Autocomplete', 'PlaceSearch', 'Scale', 'OverView', 'ToolBar', 'MapType', 'PolyEditor', 'AMap.CircleEditor'],

      // 默认高德 sdk 版本为 1.4.4

      v: '1.4.4'

    });

    new Vue({

      el: '#app',

      data: function(){

        return { }

      }

    });

  </script>

</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. Python向IP地址发送字符串

    在Python中,向IP地址发送字符串通常意味着你需要通过某种协议来实现通信.最常见的协议包括TCP和UDP.这里,我将分别给出使用TCP和UDP协议向指定IP地址发送字符串的示例代码. 1.TCP. ...

  2. DDD建模后写代码的正确姿势（Java、dotnet双平台）

    本文书接上回<一种很变态但有效的DDD建模沟通方式>,关注公众号(老肖想当外语大佬)获取信息: 最新文章更新: DDD框架源码(.NET.Java双平台): 加群畅聊,建模分析.技术交流: ...

  3. 记录荒废了三年的四年.net开发的第三次面试，苏州斯莱克

    现在就业的确崩了 这次面试的时间是8月28号.距离上一次面试已经过去了一个月了,距离开始找工作已经过去了2个月.没多少找工作经验的我也体会到了什么叫就业崩了. 看了一线码农的采访计划后,我也把苏州列为 ...

  4. Centos7.6下安装Docker环境

    1.首先查看服务器系统内核,docker环境要求的内核必须在3.10或以上 执行:uname -r 版本为3.10,可安装docker 2.切到root用户下,更新yum源,使yum源为最新状态 执行 ...

  5. 数据库中查询含有某个emoji表情的行数据

    数据库中查询含有某个emoji表情的行数据 MySQL的情况 代码如下 ​ create table tt6(id int, name varchar(800)); insert into tt6 s ...

  6. ARC119F 题解

    前言 ARC119F 好厉害,是没见过的自动机 DP. 正文 [1] 分析 主要分析一下为什么这么写. [2] 状态设计 [3] 自动机状态转移 感觉状态设计中最难的就是如何处理带 \(O\) 的. ...

  7. Mmdetection dataset pipline

    数据的加载顺序是上图(来自mmdetection官网)中的顺序进行,上图中只有一次padding,但是其实dataloader一共有两次padding,一次是pad,另外一次就是collect后,给模 ...

  8. Windbg常用命令及分析套路

    自己也在使用windbg分析问题,但是属于刚入门所以转发下大神的总结:https://www.cnblogs.com/fj365/p/13295453.html 常用 !threadpool 查看线程 ...

  9. Adobe Acrobat XI Pro 打开pdf报错 109

    事件起因: 某同事在使用 Adobe Acrobat XI Pro 打开pdf文件时,会偶发性的报错 "处理页面时发生错误.读取本文当时出现问题(109)."   解决办法: 在网 ...

  10. LeetCode 332. Reconstruct Itinerary 最小欧拉路径

    题意 给N个单词表示N个点,和N-1个单词对,表示可以走的路径,求字典序最小的总路径. 首先说下这么暴力DFS能过.暴力的我都不敢写= = class Solution { public: vecto ...