// 引入高德地图
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. 教你一招,测试人员如何通过AI提高工作效率!

    伴随着AI技术的兴起,像OpenAI推出的ChatGPT.Microsoft发布的Microsoft 365 Copilot.阿里的通义千问.百度的文心一言.华为的盘古大模型等.很多测试人员开始担心, ...

  2. Linux 防火墙与安全管理工具详解

    Linux 防火墙与安全管理工具详解 1. Iptables 概述 Iptables 是 Linux 系统中用于控制网络流量的工具,通过定义规则来过滤.转发和修改数据包.其规则可以细致地管理进入和离开 ...

  3. Android Qcom USB Driver学习(十二)

    keypad 在suspend的过程中导致Android无法进入suspend的问题,导致整体功耗过高,其实是主机都没有进入睡眠,通过以下打log的方式最终定位到问题,pmic vbus输出的时候会有 ...

  4. ARM SMMU 与 IOMMU 的区别

    ARM SMMU (System Memory Management Unit) 和 IOMMU (Input-Output Memory Management Unit) 都是用于管理系统内存访问和 ...

  5. 墨天轮国产数据库沙龙 | 张玮绚:TDengine,高性能、分布式、支持SQL的时序数据库

    分享嘉宾:张玮绚(Wade Zhang)北京涛思数据科技有限公司(TDengine)研发VP 整理:墨天轮 导读 TDengine 是一款高性能.分布式.支持 SQL 的时序数据库,让大量设备.数据采 ...

  6. jQuery的$(document).ready(function(){}) 和 原生 js 的load 等待加载事件有什么不同

    jQuery 的 $(function (){})  函数入口需要等待 DOM 结构绘制完成才会执行 , 不用等待外部资源加载完毕  和原生js 的 DOMContentLoaded 类似 , 2 者 ...

  7. text-align的对齐方式

    text-align的6种取值 left:左对齐 right:右对齐 center:居中 start:如果内容方向是左至右,则等于left,反之则为right. end:如果内容方向是左至右,则等于r ...

  8. 快速部署kafka集群和可视化界面

    3台机器部署kafka集群的分布 10.1.161.111 -> kafka(1个节点)+ zookeeper(一个节点)+ kowl(一个节点) 10.1.161.112 -> kafk ...

  9. (系列九)使用Vue3+Element Plus创建前端框架(附源码)

    说明 该文章是属于OverallAuth2.0系列文章,每周更新一篇该系列文章(从0到1完成系统开发). 该系统文章,我会尽量说的非常详细,做到不管新手.老手都能看懂. 说明:OverallAuth2 ...

  10. costmap代价地图

    1 什么是costmap代价地图 在机器人进行路径规划时,我们需要明白规划算法是依靠什么在地图上来计算出来一条路径的.依靠的是gmapping扫描构建的一张环境全局地图,但是仅仅依靠一张原始的全局地图 ...