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= ...
随机推荐
- Elsa V3学习之Flowchart详解（上）
前面我们通过界面学习了Elsa的一些基本使用,若是有实操的小伙伴们,应该可以发现,我们工作流定义中的root,既我们的工作流画布其实也是一个activity,就是Flowchart.那么本文将来解读以 ...
- 每天那么多工作，我为什么能做到 "不忘事" ？
大家好,我是程序员鱼皮. 我相信很多朋友都遇到过丢失工作.或者忘记事情的情况,尤其是事情一多,就更容易遗漏:而如果在工作中你漏掉了某项任务,需要上级或同事重复提醒你,是很影响别人对你的印象的. 那么如 ...
- Element ui 动态自定义表格单元格样式
最终实现效果 在Element UI 的文档中提到了用cell-style 方法来自定义单元格样式: 具体使用方法: 1. 在el-table 标签中添加 cell-style 绑定的自定义方法 2. ...
- P2P 下载入门
基本概念 直链下载: https://file-examples.com/wp-content/storage/2017/04/file_example_MP4_480_1_5MG.mp4 直链就是一 ...
- 浅谈下javascript的proxy和reflect
近日喜欢上了uniapp和vue,但看到相关程序代码中频繁出现了proxy和reflect的使用,于是进行了一番学习,现总结如下. Proxy和Reflect是ES6(ECMAScript 2015) ...
- Java Pom两个模块需要互相引用怎么办
1. Java POM模块化是什么 在Java项目中,特别是在使用Maven作为构建工具时,"POM模块化"是一个重要的概念,它指的是将大型项目拆分成多个更小.更易于管理的模块(或 ...
- Adobe Acrobat XI Pro 打开pdf报错 109
事件起因: 某同事在使用 Adobe Acrobat XI Pro 打开pdf文件时,会偶发性的报错 "处理页面时发生错误.读取本文当时出现问题(109)." 解决办法: 在网 ...
- CSP-S 2023 游记
CSP-S 2023 游记 Day 0 明天便是 CSP-S 第一轮了,考试前一天万万不能学什么太复杂,太深奥的东西,最好甚至不要过于强度的用脑,保持放空的轻松地状态,心中不要有压力才是最好的考前状态 ...
- USB和CAN都是用差分信号来传输数据，为什么CAN的传输距离能比USB远那么多？
USB和CAN的区别 今天在看USB项目设计实例的时候,突然想到一个问题,从而引发了一些思考.经过思考加上查阅资料,写出了这一篇文章作为记录. 问题 USB和CAN都是用两条线作为差分线以差分信号 ...
- iOS动画之CABasicAnimation的使用方法（移动，旋转，缩放）
设定动画CABasicAnimation的属性和说明 属性 说明 duration 动画的时间 repeatCount 重复的次数.不停重复设置为 HUGE_VALF repeatDuration ...