网站首页 > 开源技术 正文
相信学习前端的小伙伴一定知道vue是什么吧,对他是一种前端的框架,今天我们就用vue框架做一个有趣东西,希望小猿圈前端讲师准备的Vue引入AMap高德地图实现代码能给你一定帮助。
首先针对VueCLI3.x生成的项目有效,但是在第二步配置的时候,可以直接配置webpack.externals,所以本引入思路是通用的,并不局限于该项目。
引入AMap
在public/index.html文件</body>前引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
配置Webpack
项目根目录新建配置文件vue.config.js,填入内容:
module.exports = {
configureWebpack: {
externals: {
AMap: "window.AMap"
}
}
};
在项目中使用
新建Index.vue文件,填入内容:
<template>
<div>
<div style="width: 100vw;height: 100vh" id="container"></div>
</div>
</template>
<script>
// eslint-disable-next-line
import AMap from "AMap";
export default {
name: "Index",
data() {
return {};
},
mounted() {
new AMap.Map("container", {
resizeEnable: true,
zoom: 11
});
}
};
</script>
以上就是关于小猿圈前端讲师介绍的Vue引入AMap高德地图实现代码的全部内容,希望对大家的学习有所帮助,小猿圈竭力为你提供更全面更有竞争力的视频,希望对你有所帮助。
- 上一篇: 基于 Vue 和高德地图实现地图组件「实践」
- 下一篇: vue中使用地图(vue移动端地图)
猜你喜欢
- 2024-10-06 高德地图AMap is not defined解决
- 2024-10-06 「分享」我在阿里总结了5条高效工作经验
- 2024-10-06 Vue 前端开发——打印功能实现(vue打印console)
- 2024-10-06 教你Vue3 Compiler 优化细节,如何手写高性能渲染函数(下)
- 2024-10-06 Vue3.0权限管理实现流程【实践】(vue权限控制思路)
- 2024-10-06 手把手教你Electron + Vue实战教程(三)
- 2024-10-06 让Jenkins自动部署你的Vue项目「实践」
- 2024-10-06 Vue 前端开发——导入Excel/Csv(vue导入导出)
- 2024-10-06 1.1万字深入细品Vue3.0源码响应式系统笔记「上」
- 2024-10-06 Vue+Node+高德地图+Echart做一款出行可视化全栈webapp
你 发表评论:
欢迎- 最近发表
-
- 后端服务太慢?试试这 7 招(后端 服务端 区别)
- 做一个适合二次开发的低代码平台,把程序员从curd中解脱出来-1
- Caffeine缓存 最快缓存 内存缓存(caffeine缓存使用)
- Java性能优化的10大策略(java性能调优从哪几个方面入手)
- New Balance M576PGT 全新配色设计
- x-cmd pkg | qrencode - 二维码生成工具
- 平和精英抽奖概率是多少 平和精英抽奖物品一览
- x-cmd pkg | tmux - 开源终端多路复用器(terminal multiplexer)
- 漫威官方App中文版上线:全站漫画限时免费
- macOS Monterey 12.7.4 (21H1123) 正式版发布,ISO、IPSW、PKG 下载
- 标签列表
-
- jdk (81)
- putty (66)
- rufus (78)
- 内网穿透 (89)
- okhttp (70)
- powertoys (74)
- windowsterminal (81)
- netcat (65)
- ghostscript (65)
- veracrypt (65)
- asp.netcore (70)
- wrk (67)
- aspose.words (80)
- itk (80)
- ajaxfileupload.js (66)
- sqlhelper (67)
- express.js (67)
- phpmailer (67)
- xjar (70)
- redisclient (78)
- wakeonlan (66)
- tinygo (85)
- startbbs (72)
- webftp (82)
- vsvim (79)
本文暂时没有评论,来添加一个吧(●'◡'●)