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/#/ 这是我的码 ...
随机推荐
- SQL Server – History Table (Audit/Archive Table)
前言 续上一篇的 Soft Delete 后, 我们继续来看看 History Table (Audit/Archive Table). Archive Table 市场上有了这样叫, 但我觉得它比较 ...
- Eclipse中Java项目的导入和导出
eclipse中项目的导出 当我们完成自己的java项目之后,我们可以将其打包发给别人,eclipse为我们提供了自动打包的功能. 之后单击finish即可.在你选择的导出位置便可以看到导出的压缩包: ...
- ARM SMMU中 SteamTable的作用
在 ARM SMMU(System Memory Management Unit)中,Stream Table 是一个非常关键的数据结构,它用于管理和映射设备的内存访问请求.它的作用主要体现在以下几个 ...
- 元素偏移量offset 与 style 区别 ?
offset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的数字offsetWidth 包含padding+border+width offsetWidth 等属性是只读属性,只 ...
- 基于腾讯云短信接口和nodejs服务器实现手机号验证码
知识储备:js基础.nodejs基础.ajax基础: 1. 手机验证码原理 表单提交,把手机号码传送到后端:后端拿到手机号码后根据相关算法随机形成一个验证码,并将其保存在数据库:用户拿到验证码后将验证 ...
- token有⼀定的失效性,过期了该怎么做?
token 失效分为主动失效和被动失效 主动失效 就是自己设置函数检查token是否失效了, 主要步骤 :1 1.在登录的时候记录存储token的时间, 2. 在request文件,设置一个函数,用来 ...
- 阿里云服务器安装mysql镜像
新创建的服务器首先需要创建安全组,开放端口然后重启服务器 登陆远程服务器,具体操作步骤如下 #拉取镜像 docker pull mysql:5.7 #查看镜像是否拉取到 docker images # ...
- 云原生周刊:OpenTofu Registry 获得用户界面和 API|2024.9.9
开源项目推荐 kubectl trace kubectl trace 是一个 kubectl 插件,它允许你在 Kubernetes 集群中调度执行 bpftrace 程序. Kondense Kon ...
- 分享一个很好用的代理转发工具:rinetd
rinetd介绍: 安装与使用:https://zhuanlan.zhihu.com/p/530875131 注意事项: 1.如果发现配置中的端口在进程中没找到,那就是配置填写错误导致的,笔者就遇到过 ...
- Nuxt.js 应用中的 build:done 事件钩子详解
title: Nuxt.js 应用中的 build:done 事件钩子详解 date: 2024/10/21 updated: 2024/10/21 author: cmdragon excerpt: ...