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/#/ 这是我的码 ...
随机推荐
- Vue3——Vite + element-plus +Vue3 项目搭建、"@"别名设置
1. 环境准备 node 官网 npm 切换国内 npm 源镜像 npm config set registry https://registry.npmmirror.com 查看当前的镜像源 npm ...
- AD域下,环境下办公机系统时间不准确
事件起因: 某部门一同事电脑时间和AD域控时间相差3分钟,虽然说时间相差5分钟内问题不大,但是本着有问题就解决的原则,还是花了点时间去查资料解决. (小小吐槽一下,在我看来域控机是掌管下面所有的办公机 ...
- Java实现随机抽奖的方法有哪些
在Java中实现随机抽奖的方法,通常我们会使用java.util.Random类来生成随机数,然后基于这些随机数来选择中奖者.以下将给出几种常见的随机抽奖实现方式,包括从数组中抽取.从列表中抽取以及基 ...
- 服务器Linux的一些常用命令,收藏备用!
在Linux服务器的管理和维护过程中,掌握一些常用的命令是非常必要的.这些命令不仅可以帮助你更好地了解和控制系统,还能提高工作效率,减少错误发生的概率.本文将详细介绍一些在Linux服务器上常用的命令 ...
- linux那些事之页迁移(page migratiom)
Page migration 页迁移技术是内核中内存管理的一种比较重要的技术,最早该技术诞生于NUMA系统中(Page migration [LWN.net]),后续由于内存规整以及CMA和COW技术 ...
- 将Vscode添加右键打开文件夹功能
1. wan + r 输入 regedit 打开注册表 注册表编辑 2. 找到 HKEY_CLASSES_ROOT\*\shell分支 3. 在shell下新建"VisualCode&quo ...
- 从浏览器输入url到回车发生了什么
1. 域名解析,即把域名解析成以为唯一的ip ps:ip是每个网站的对应的一个key,域名是为了语义化,方便使用而设计的 : ps:第一次域名解析需要花费较长的时间,所以一般第一次解析就会把DNS解析 ...
- DiTAC:不知如何提升性能?试试这款基于微分同胚变换的激活函数 | ECCV'24
非线性激活函数对深度神经网络的成功至关重要,选择合适的激活函数可以显著影响其性能.大多数网络使用固定的激活函数(例如,ReLU.GELU等),这种选择可能限制了它们的表达能力.此外,不同的层可能从不同 ...
- 快速部署单服务器oracle12c
docker pull docker.io/truevoly/oracle-12c mkdir -p /usr/local/oracle/data_temp chmod 777 /usr/local/ ...
- 7 个非常实用的 Shell 拿来就用脚本实例!
前天,在群里看到有一位读者分享了几道 Shell 脚本实例题目,索性看到了,不如来写写巩固下基础知识,如下: 1. 并发从数台机器中获取 hostname,并记录返回信息花费的时长,重定向到一个文件 ...