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= ...
随机推荐
- .NET8 Blazor 从入门到精通：（三）类库和表单
目录 Razor 类库 创建 使用 使可路由组件可从 RCL 获取 静态资源 表单 EditForm 标准输入组件 验证 HTML 表单 Razor 类库 这里只对 RCL 创建和使用的做一些简单的概 ...
- 处理一直显示npm WARN using –force Recommended protections disabled.的问题
使用 npm config set force false 可以消除.
- .net core下使用事件总线
随着微服务的火热,DDD(领域驱动设计模式)思想风起云涌,冲击着整个软件生态系统.其中,事件总线那是必须知道的了,于是我便抱着一个学习DDD的心态搭建了一个博客网站,目前该网站正在建设 ...
- React 高德地图 进京证 （二）
上回书说到,躲开摄像头的基本功能实现了,但有三个核心问题: (1)速度慢 (2)距离远易失败 (3)地图限制 第一个问题:较为简单,把几千个摄像头按行政区划分好带上编号,在路线分段避让时按片儿计算,综 ...
- Visual studio 2019 无法推送代码到 GitHub
博客转载:VS2022 无法推送到GitHub,也无法克隆项目_vs连不上github-CSDN博客 问题描述` 使用vs2019 git无法推送到github 解决办法` 按照大神的描述设置,非常好 ...
- [WPF]数据绑定时为何会出现StringFormat失效
在数据绑定过程中,我们经常会使用StringFormat对要显示的数据进行格式化,以便获得更为直观的展示效果,但在某些情况下格式化操作并未生效,例如 Button的 Content属性以及ToolTi ...
- 关于arcmap使用json文件转要素类
手工编辑了一个json文件,或者在arcgis server下拉取到的json格式文件,通过arcmap进行转换时,出现异常,错误代码001558,此时就是json文件格式不是ansi导致的,用文本编 ...
- devops-3：Jenkins增加静态节点
Jenkins管理静态节点 Jenkins搭建完成后一般只有一个master节点,此节点主要用于管理Jenkins配置,如果再在master节点上跑一系列的Job,未免有点太勉强,并且如果出现资源紧缺 ...
- web 3d 技术预研及数据可视化技术
web 3D 技术 白纸一张,先理一理概念: webGL 是low level 库,three.js 是high level 库,一般只要理解webGL里的概念,实际用thee.js 开发更容易 3D ...
- JavaScript之Blob对象基本用法及分片上传示例
Blob基本用法 创建 通过Blob的构造函数创建Blob对象: new Blob(blobParts[, options]) blobParts: 数组类型, 数组中的每一项连接起来构成Blob对象 ...