// 引入高德地图
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. DTO转VO工具

    data工具,实现了对象拷贝 DTO -> VO 只需要实现一个类即可 data-utils data工具,实现了对象拷贝DTO -> VO 解决的问题 Mapstruct需要安插件!!! ...

  2. GPUStack正式发布: 为大模型而生的开源GPU集群管理器

    经过 Seal 研发团队几个月来持续的开发和测试,我们满怀期待及热情地发布新的产品 GPUStack,GPUStack 是一个用于运行 LLM(大型语言模型)的开源 GPU 集群管理器.尽管如今大语言 ...

  3. Java!!冲

    开始学习Java!!!

  4. SqlEs-像使用数据库一样使用Elasticsearch

    SqlEs SqlEs是Elasticsearch的客户端JDBC驱动程序,支持采用sql语法操作Elasticsearch.SqlEs构建在RestHighLevelClient,屏蔽了RestHi ...

  5. LNMP 和 LAMP 对比 (仅供参考)

    Nginx 性能稳定.功能丰富.运维简单.处理静态文件速度快且消耗系统资源极少. Apache 是 LAMP 架构最核心的 Web Server,开源.稳定.模块丰富是 Apache 的优势.但 Ap ...

  6. K8S基本组件梳理

    Master组件 apiserver:对资源对象进行curd操作,例如pod和server:将所有的状态储存到etcd中. schedule:监控未调度的pod,根据pod的资源需求.资源可用性和其他 ...

  7. c++可变模板参数

    在C++中的可变模板参数使用省略号 ... 来表示一个参数包(Parameter Pack),其具体位置决定了这个包是模板参数包还是函数参数包,以及如何进行参数展开. 1. 模板参数包:c... Ar ...

  8. linux overlay文件系统

    一个 overlay 文件系统包含两个文件系统,一个 upper 文件系统和一个 lower 文件系统,是一种新型的联合文件系统.overlay是"覆盖-上面"的意思,overla ...

  9. 数组对象删除不满足某些条件的对象 js

    recursiveFunction(items, childrenNodeName, ids) { console.log('items', ids); // 获取数组长度 if (items) it ...

  10. CNI 基准测试:Cilium 网络性能分析

    原文链接:https://cilium.io/blog/2021/05/11/cni-benchmark 作者:Thomas Graf 译者:罗煜.张亮,均来自KubeSphere 团队 Thomas ...