通过 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被远程主机强制关闭后怎么自动重新运行进程

    要实现Python程序在被远程主机强制关闭后能够自动重新运行,我们可以采用几种方法,但最直接且常用的方法之一是结合操作系统级的工具或脚本.在Linux系统中,我们可以使用cron作业或者systemd ...

  2. Spherical Voxelization

    Spherical Voxelization 标签: voxelization AI 摘要: 文档介绍了球面体素化的过程,包括重要的类和方法,如ConvertToSphericalVoxel和sphe ...

  3. MSI Afterburner 使用

    MSI Afterburner 是一款显卡超频软件,同时可以监测硬件运行数据(CPU 温度.GPU 温度.帧率.帧生成时间等).与其捆绑安装的 RivaTuner Statistics Server ...

  4. Homebrew 卸载 Wireshark 报错

    我在使用 Homebrew 安装 Wireshark 的时候,Homebrew 要求我输入密码.此时我又不想安转 Wireshark 了,于是我没有输入密码并且按下了 Ctrl + C.后来,我又尝试 ...

  5. 钉钉H5微应用本地开发调试记录

    准备工具: 手机(ios,安卓) 安卓手机可以用网易Mumu模拟器,下载一个移动版钉钉 钉钉开放文档 本地开发的话,可以去钉钉后台管理系统,将你的本地ip地址配置成应用的首页,比如 10.xx.xx. ...

  6. 事件触发器TRIGGER

    我所理解的事件 MYSQL触发器 就好比是 JavaScript 中的 Object.defineProperty,通过观察某些行为,然后做些事情 创建触发器 DELIMITER $$ CREATE ...

  7. Figma 学习笔记 – Color

    大纲 Figma 的颜色是通过 FIll 实现的 (Fill 还有其它功能比如 fill 图片) 整体大概长这样, 我们一个一个看 颜色和 opacity

  8. QT原理与源码分析之对象级QT事件过滤器

    本文简略介绍了QT原理与源码分析中的QT对象级事件过滤器的自定义过滤函数.对象级事件过滤器的安装过程,以及安装函数的源码实现. 自定义QT事件过滤器的过滤函数的实现: 事件过滤器被调用时执行的函数代码 ...

  9. 开发板、windows、虚拟机互相ping通/ VMNET0、VMNET1、VMNET8释义

    当前环境:板子通过网线连接windows 问题: 我当前的板子可以ping通windows,windows也能ping通ubuntu.但是板子却ping不通ubuntu. 原因: ubuntu通过NA ...

  10. Web刷题之polarctf靶场(2)

    1.蜜雪冰城吉警店 点开靶场, 发现题目说点到隐藏奶茶(也就是第九杯)就给flag, 但是明显就只有八杯, 猜测大概率考的是前端代码修改 把id=1修改为id=9, 然后回到页面点击原味奶茶即可弹出f ...