vue-amap接入高德地图示例
通过 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接入高德地图示例的更多相关文章
- Unity与Android交互-Unity接入高德地图实现定位以及搜索周边的功能（使用Android Studio）详细操作
刚进公司给安排的任务就是Unity接入高德地图,算是踩了不少坑总算做出来了,抽点时间写个博客记录一下 废话不多说 先上效果图 获取定位并根据手机朝向显示周边信息 使用的Unity ...
- 在vue中使用高德地图开发，以及AMap的引入？
百度引入BMap ,一个import 即可,可AMap 却报AMap is not difined ? 1.首先在 externals: { "BMap": "BMap& ...
- 在vue中使用高德地图vue-amap
1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...
- VUE组件 之 高德地图地址选择
注:本文基于上一篇文章[ Vue-Cli 3.0 中配置高德地图] ,采用直接引入高德 SDK 的方式来使用高德地图api 一.效果图 二.组件要实现的功能 1. 如果有传入坐标点,则定位到坐标点 2 ...
- 如何在vue里面调用高德地图
1.修改webpac.base.conf.js文件 与module同一级添加 externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' }配置. 然后在index ...
- vue+vant ui+高德地图的选址组件
首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...
- react项目中引用amap（高德地图）坑
最近在写一个react项目,用到了需要定位的需求,于是乎自己决定用高德地图(AMap),但是react官方文档的案列很少,大多都是原生JS的方法. 在调用amap的 Geocoder Api 时,一直 ...
- vue项目接入百度地图
方法一 :使用第三方工具 vue-baidu-map 安装命令: yarn add vue-baidu-map --save 文档地址:https://dafrok.github.io/vue-bai ...
- vue.js 使用高德地图
1.获取key值 注册成为高德开发者需要分三步: 第一步,注册高德开发者: 第二步,去控制台创建应用: 第三步,获取Key 2.修改配置文件 webpack.base.conf.js externa ...
- vue 里面引入高德地图
效果图: 实现: 一:引入 高德,web-sdk (两种方式) 1:在html 中引入(我用的这一种) <script type="text/javascript" src= ...
随机推荐
- WPF 模拟UWP原生窗口样式——亚克力|云母材质、自定义标题栏样式、原生DWM动画 （附我封装好的类）
先看一下最终效果,左图为使用亚克力材质并添加组合颜色的效果:右图为MicaAlt材质的效果.两者都自定义了标题栏并且最大限度地保留了DWM提供的原生窗口效果(最大化最小化.关闭出现的动画.窗口阴影.拖 ...
- 玄机蓝队靶场_应急响应_01:linux日志分析
个人感觉这个靶场主要考验对linux的命令的基础掌握,对日志路径的基本了解. 一:解题 (1)ssh连接靶场,先用命令lsb_release -a看看是什么系统.然后发现是Debian GNU/Lin ...
- 使用 Microsoft Remote Desktop 远程连接 Windows
Windows 使用 Microsoft 帐户登录 远程连接时使用的用户名和密码是你的 Microsoft 帐户的用户名和密码 Windows 使用本地帐户登录 远程连接时使用的用户名和密码是你本地登 ...
- Kubernetes-13：存储卷Volume介绍及使用
Volume介绍 Volume存在的意义 容器磁盘上的文件的生命周期是短暂的,这就使得在容器中运行重要应用时会出现一些问题,首先,当容器崩溃时,kubelet会重启它,但是容器中的文件将丢失--容器以 ...
- 网络安全公开数据集Maple-IDS，恶意流量检测数据集开放使用！
Maple Dataset 枫叶数据集Maple Dataset枫叶数据集由东北林业大学网络安全实验室(https://maple.nefu.edu.cn/lab/)公开发布,是用于入侵检测评估的数据 ...
- 肉夹馍（Rougamo）4.0.1 异步方法变量调试修复与IoC系列扩展
肉夹馍(https://github.com/inversionhourglass/Rougamo),一款编译时AOP组件,无需在应用启动时进行初始化,也无需繁琐的配置:支持所有种类方法(同步和异步. ...
- 开源问卷调查和考试系统 SurveyKing 安装和使用教程
最近公司又要搞什么满意度调查了,我这个小菜鸟又要头疼了.上次用那个破系统,界面丑不说,功能还少得可怜,搞得我加班到半夜.这回非得找个好用的不可. 正发愁呢,突然想起来前两天同事小王推荐了一个叫 &qu ...
- 6.13API接口服务类漏洞探针
ip地址解析:www.x.x.x.com, 对应网站目录为d:/wwwroot/xiaodi/ 而127.x.x.x,对应网站目录为d:/wwwroot/,可能存在网站备份文件zip,所以ip网址端口 ...
- JavaScript – 冷知识 (新手)
当 charAt 遇上 Emoji 参考: stackoverflow – How to get first character of string? 我们经常会用 charAt(0) 来获取 fir ...
- 从0到1，Flask全网最全教学！全文1w字，蓝图、会话、日志、部署等使用Flask搭建中小型企业级项目
从0到1,Flask全网最全教学!全文1w字,蓝图.会话.日志.部署等使用Flask搭建中小型企业级项目 什么是flask? Flask是一个使用Python编写的轻量级Web应用框架,它简洁而灵活, ...