vue使用高德地图Amap未定义问题
// 引入高德地图
import VueAMap from 'vue-amap'; Vue.use(VueAMap); // 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: '您申请的高德地图key',
// 插件集合
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 高德 sdk 版本,默认为 1.4.4
v: '1.4.4'
});
<template>
<el-amap id="container"></el-amap>
</template> <script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
created() {
lazyAMapApiLoaderInstance.load().then(() => {
this.initMap();
});
},
methods: {
initMap() {
this.map = new AMap.Map("container", {
center: [117.463316, 40.550095],
pitch: 50, //俯仰角度
viewMode: "3D", //使用3D视图
zoom: 12, //级别
});
}
</script>
w完美解决
vue使用高德地图Amap未定义问题的更多相关文章
- vue调用高德地图:vue-amap
前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...
- vue集成高德地图
vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...
- vue 调用高德地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...
- 高德地图(AMap)JavaScript API的使用
申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...
- 前端vue使用高德地图
首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...
- vue引入高德地图
一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...
- vue 使用高德地图vue-amap组件
首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...
- vue 引用高德地图
vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...
- vue 高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链 ...
- 基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
随机推荐
- Redis 入门 - 收官
<Redis 入门>系列文章总算完成了,希望这个系列文章可以想入门或刚入门的同学提供帮助,希望能让你形成学习Redis系统性概念. 当时为什么要写这个系列文章,是因为我自己就是迷迷糊糊一路 ...
- Python 潮流周刊#70:微软 Excel 中的 Python 正式发布!(摘要)
本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...
- 视频剪辑过于卡顿,让Pr更流畅的技巧 ( 待测试 )
事件起因: 项目组某后期同事,使用Pr剪辑视频非常卡顿,但是机器配置是完全满足他的办公需求的 解决办法: 1. 降低回放分辨率 如果你的视频预览卡顿,首先应该考虑的,就是当前回放分辨率是否过高.通常在 ...
- USB通讯架构及数据模型
注意: (1)一个usb设备由一个或者多个接口组成: (2)每一个接口为usb设备的一个功能,比如上面的usb设备由两个接口,一个可用于鼠标,一个可用于键盘: (3)每个接口占用usb设备的多个端口资 ...
- 4.2 等差数列及其前n项和
\(\mathbf{{\large {\color{Red} {欢迎到学科网下载资料学习}} } }\)[[高分突破系列]高二数学下学期同步知识点剖析精品讲义! \(\mathbf{{\large { ...
- 干货必收藏!墨天轮最受DBA欢迎的250份学习文档合集
作为一个DBA,必须要精通SQL命令.各种数据库架构.数据库管理和维护.数据库调优,必要的时候,还需要为开发人员搭建一个健壮.结构良好.性能稳定的数据库环境. 技术也是不断进步的,社会的发展要求DBA ...
- 收到offer之后的回复术语
不去: 您好,非常荣幸能收到贵岗的offer, 感谢您对我能力的认可,但贵公司岗位要求/薪资结构和我预想还有一定的差距,希望今后有共事的机会,祝您工作顺利! 去: 您好,非常荣幸能够收到贵公司的o ...
- 云原生周刊: 使用 Kubectl 执行 100 个 Kubernetes 诊断命令 | 2023.10.23
开源项目推荐 Stern Stern 是一个针对 Kubernetes 的多 pod 和容器日志跟踪工具.可以跟踪 Kubernetes 上的多个 pod 和 pod 中的多个容器.每个结果都用颜色编 ...
- 云原生周刊:GitOps 的 4 条核心原则
日前在温哥华举行的 cdCON + GitOpsCon 上,分享内容以 GitOps 原则为特色: GitOps 是声明式的: GitOps 应用程序是版本化的和不可变的: 自动拉取 GitOps 应 ...
- 可重入锁ReentrantLock
ReentrantLock 重入锁,是实现Lock 接口 的一个类,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源重复加锁,即当前线程获取该锁后再次获取不会被阻塞. 要想支持重入 ...