// 引入高德地图
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未定义问题的更多相关文章

  1. vue调用高德地图:vue-amap

    前言:之前没有接触过页面调用地图的项目,某次面试,老板要求我用vue-amap调用高德地图,回家以后,我去网上查了一些案例和教程,看似很简单的引入调用,我却整整弄了一宿,还没弄出来!!!百般无奈之下, ...

  2. vue集成高德地图

    vue集成高德地图 前言 二.使用步骤 1.注册高德开发平台 2.vue 结尾 前言 之前玩Thymeleaf的时候玩过高德地图,现在无聊Vue项目也整个地图进去~ 二.使用步骤 1.注册高德开发平台 ...

  3. vue 调用高德地图

    一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 https://elemefe.github.io/vue-amap/#/ 这个就不细说了,按照其文档,就能够安装下来. 二. ...

  4. 高德地图(AMap)JavaScript API的使用

    申请JSAPI的开发者key 申请地址:http://lbs.amap.com/dev/key 引入高德地图JavaScript API文件: <script type="text/j ...

  5. 前端vue使用高德地图

    首先,注册Key 1.注册开发者账号,成为高德开放平台开发者 2.登陆之后,在进入「应用管理」 页面「创建新应用」 3.为应用添加 Key,「服务平台」一项请选择「 Web 端 ( JSAPI ) 」 ...

  6. vue引入高德地图

    一,下载 npm install vue-amap --save 二,main.js文件内引入 import VueAMap from 'vue-amap' Vue.use(VueAMap); // ...

  7. vue 使用高德地图vue-amap组件

    首先    npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use ...

  8. vue 引用高德地图

    vue 引用地图之傻瓜式教程(复制粘贴即可用) npm 下载 npm install vue-amap --save main.js 代码 import AMap from 'vue-amap'; V ...

  9. vue 高德地图之玩转周边

    前言:在之前的博客中,有成功引入高德地图,这是以前的地址  vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看  我的github 一 .先看要实现的结果,参考了链 ...

  10. 基于vue 2.X和高德地图的vue-amap组件获取经纬度

    今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...

随机推荐

  1. Redis 入门 - 收官

    <Redis 入门>系列文章总算完成了,希望这个系列文章可以想入门或刚入门的同学提供帮助,希望能让你形成学习Redis系统性概念. 当时为什么要写这个系列文章,是因为我自己就是迷迷糊糊一路 ...

  2. Python 潮流周刊#70:微软 Excel 中的 Python 正式发布!(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  3. 视频剪辑过于卡顿,让Pr更流畅的技巧 ( 待测试 )

    事件起因: 项目组某后期同事,使用Pr剪辑视频非常卡顿,但是机器配置是完全满足他的办公需求的 解决办法: 1. 降低回放分辨率 如果你的视频预览卡顿,首先应该考虑的,就是当前回放分辨率是否过高.通常在 ...

  4. USB通讯架构及数据模型

    注意: (1)一个usb设备由一个或者多个接口组成: (2)每一个接口为usb设备的一个功能,比如上面的usb设备由两个接口,一个可用于鼠标,一个可用于键盘: (3)每个接口占用usb设备的多个端口资 ...

  5. 4.2 等差数列及其前n项和

    \(\mathbf{{\large {\color{Red} {欢迎到学科网下载资料学习}} } }\)[[高分突破系列]高二数学下学期同步知识点剖析精品讲义! \(\mathbf{{\large { ...

  6. 干货必收藏!墨天轮最受DBA欢迎的250份学习文档合集

    作为一个DBA,必须要精通SQL命令.各种数据库架构.数据库管理和维护.数据库调优,必要的时候,还需要为开发人员搭建一个健壮.结构良好.性能稳定的数据库环境. 技术也是不断进步的,社会的发展要求DBA ...

  7. 收到offer之后的回复术语

    不去: 您好,非常荣幸能收到贵岗的offer, 感谢您对我能力的认可,但贵公司岗位要求/薪资结构和我预想还有一定的差距,希望今后有共事的机会,祝您工作顺利!   去: 您好,非常荣幸能够收到贵公司的o ...

  8. 云原生周刊: 使用 Kubectl 执行 100 个 Kubernetes 诊断命令 | 2023.10.23

    开源项目推荐 Stern Stern 是一个针对 Kubernetes 的多 pod 和容器日志跟踪工具.可以跟踪 Kubernetes 上的多个 pod 和 pod 中的多个容器.每个结果都用颜色编 ...

  9. 云原生周刊:GitOps 的 4 条核心原则

    日前在温哥华举行的 cdCON + GitOpsCon 上,分享内容以 GitOps 原则为特色: GitOps 是声明式的: GitOps 应用程序是版本化的和不可变的: 自动拉取 GitOps 应 ...

  10. 可重入锁ReentrantLock

    ReentrantLock 重入锁,是实现Lock 接口 的一个类,也是在实际编程中使用频率很高的一个锁,支持重入性,表示能够对共享资源重复加锁,即当前线程获取该锁后再次获取不会被阻塞. 要想支持重入 ...