通过 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. Parallels Desktop 虚拟机网络地址

    bridge100 是宿主机在共享网络中的地址 bridge101 是宿主机在 Host-Only 网络中的地址 查询宿主机 IP 地址 $ ip addr show # 共享网络(默认) bridg ...

  2. SpringMVC的视图

    目录 ThymeleafView 转发视图 重定向视图 视图控制器view-controller SpringMVC中的视图是View接口,视图的作用渲染数据,将模型Model中的数据展示给用户Spr ...

  3. 【YashanDB数据库】YAS-02032 column type is incompatible with referenced column type

    [标题]错误码处理 [问题分类]外键约束创建报错 [关键字]YAS-02032 [问题描述]设置外键约束报错,数据元数据不正确. [问题原因分析]外键字段类型不支持,比如varchar2(64) ,指 ...

  4. Coursera, Deep Learning 5, Sequence Models, week4, Transformer Network

    self-attention multi-head attention

  5. Python 版本管理工具选择与 Pyenv 使用说明

    Python 版本管理工具的主要作用是帮助开发者在同一台机器上管理多个 Python 版本和环境.这对于开发和部署不同项目非常有用,因为不同项目可能依赖不同的 Python 版本或者不同的包版本. 具 ...

  6. 一文看懂global, nonlocal, local变量

    Python中,变量是根据程序运行顺序进行的,比如函数外的变量,在函数内是可见的,但是可用,不可赋值.那么如何实现赋值呢? 利用global关键字进行. 在函数内,如果出现和函数外的变量同名变量,而且 ...

  7. 全网最适合入门的面向对象编程教程：47 Python函数方法与接口-回调函数Callback

    全网最适合入门的面向对象编程教程:47 Python 函数方法与接口-回调函数 Callback 摘要: 回调函数是编程中一种非常常见的模式,用于将函数作为参数传递给其他函数或方法.这种模式在 Pyt ...

  8. [USACO1.5] 八皇后 Checker Challenge 题解

    [USACO1.5] 八皇后 Checker Challenge 题目描述 一个如下的 \(6 \times 6\) 的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行.每列有且只有一个,每条对角线(包括 ...

  9. OAuth2.0授权-gitee授权码模式

    OAuth2.0授权验证-gitee授权码模式 本文主要介绍如何笔者自己是如何使用gitee提供的OAuth2.0协议完成授权验证并登录到自己的系统,完整模式如图 1.创建应用 打开gitee个人中心 ...

  10. Apache-Shiro <=1.2.4 反序列化漏洞 (代码审计)

    一.Apache Shiro 简介: Apache Shiro提供了认证.授权.加密和会话管理功能,将复杂的问题隐藏起来,提供清晰直观的API使开发者可以很轻松地开发自己的程序安全代码.并且在实现此目 ...