网站首页 > 开源技术 正文
作者:饿了么前端
转发链接:https://github.com/ElemeFE/vue-amap
前言
关于地图组件,小编前面也发布过2篇文章:
「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分
接下来,小编继续讲解基于Vue来实现地图相关的组件,废话少说,直接进入正题
安装
npm install -S vue-amap
文档
https://elemefe.github.io/vue-amap
快速上手
引入vue-amap
// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德的key
key: 'YOUR_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'
});
地图
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
</el-amap>
点坐标
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-marker v-for="marker in markers" :position="marker.position"></el-amap-marker>
</el-amap>
折线
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-polyline :path="polyline.path"></el-amap-polyline>
</el-amap>
多边形
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-polygon v-for="polygon in polygons" :path="polygon.path" :events="polygon.events"></el-amap-polygon>
</el-amap>
圆
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-circle v-for="circle in circles" :center="circle.center" :radius="circle.radius"></el-amap-circle>
</el-amap>
图片覆盖物
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-ground-image v-for="groundimage in groundimages" :url="groundimage.url"></el-amap-ground-image>
</el-amap>
文本
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-text v-for="text in texts"></el-amap-text>
</el-amap>
贝塞尔曲线
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-bezier-curve v-for="line in lines"></el-amap-bezier-curve>
</el-amap>
圆点标记
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-circle-marker v-for="marker in markers"></el-amap-circle-marker>
</el-amap>
椭圆
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-ellipse v-for="ellipse in ellipses"></el-amap-ellipse>
</el-amap>
矩形
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-rectangle v-for="rectangle in rectangles"></el-amap-rectangle>
</el-amap>
信息窗体
<el-amap vid="amapDemo" :zoom="zoom" :center="center">
<el-amap-info-window v-for="window in windows" :position="window.position" :content="window.content" :open="window.open"></el-amap-info-window>
</el-amap>
Search-Box
<el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
<el-amap vid="amapDemo">
</el-amap>
其他特性
- 支持自定义组件
- 支持官方 UI 组件库
反馈
文档被大家吐槽了挺久,这段时间,针对大家的问题,对文档进行了一次升级。后续将重点持续完善「示例中心」,如果大家在使用过程中,遇到了些问题,欢迎提 issue,我们将根据大家的反馈,逐渐充实「示例中心」,更好地为大家服务。
推荐Vue学习资料文章:
《一个由 Vue 作者尤雨溪开发的 web 开发工具—vite》
《提高10倍打包速度工具Snowpack 2.0正式发布,再也不需要打包器》
《大厂Code Review总结Vue开发规范经验「值得学习」》
《带你了解 vue-next(Vue 3.0)之 炉火纯青「实践」》
《「干货」Vue+高德地图实现页面点击绘制多边形及多边形切割拆分》
《细品pdf.js实践解决含水印、电子签章问题「Vue篇」》
《Vue仿蘑菇街商城项目(vue+koa+mongodb)》
《基于 electron-vue 开发的音乐播放器「实践」》
《「实践」Vue项目中标配编辑器插件Vue-Quill-Editor》
《「干货」Deno TCP Echo Server 是怎么运行的?》
《「实践」基于Apify+node+react/vue搭建一个有点意思的爬虫平台》
《「实践」深入对比 Vue 3.0 Composition API 和 React Hooks》
《前端网红框架的插件机制全梳理(axios、koa、redux、vuex)》
《深入学习Vue的data、computed、watch来实现最精简响应式系统》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(一)》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(二)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《2020 年,Vue 受欢迎程度是否会超过 React?》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》
作者:饿了么前端
转发链接:https://github.com/ElemeFE/vue-amap
猜你喜欢
- 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)
本文暂时没有评论,来添加一个吧(●'◡'●)