网站首页 > 技术文章 正文
今天给小伙伴们推荐一款超高标准的 Vue2.x 地图选择器组件VueBaiduMap。
vue-baidu-map 一个基于Vue.js封装的高水平百度地图组件。全中英文文档,丰富的API示例,支持引入百度地图扩展包。
安装
$ npm i vue-baidu-map -S
引入
# 全局引入:在main.js中注册组件
import Vue from 'vue'
import VueBaiduMap from 'vue-baidu-map'
Vue.use(VueBaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'MAP_APP_KEY'
})
# 按需引入:局部注册的 BaiduMap 组件必须声明 ak 属性
<template>
<vue-baidu-map class="bm-view" ak="MAP_APP_KEY"></vue-baidu-map>
</template>
<script>
# 所有独立组件均存放在 vue-baidu-map/components 文件夹下,按需引用即可
import VueBaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components: {
VueBaiduMap
}
}
</script>
使用插件
<template>
<vue-baidu-map
class="map-view"
:scroll-wheel-zoom="true"
:center="location"
:zoom="zoom"
@click="getLocationPoint"
@zoomend="getCenterAndZoom"
>
</vue-baidu-map>
</template>
<script>
export default {
data() {
return {
location: {
lng: 116.318,
lat: 39.996,
},
zoom: 15,
}
},
methods: {
getLocationPoint(e) {
console.log(e.point);
},
getCenterAndZoom(e) {
const {lng, lat} = e.target.getCenter()
this.location.lng = lng
this.location.lat = lat
this.zoom = e.target.getZoom()
}
}
}
</script>
<style>
.map-view {
width: 100%;
height: 360px;
}
</style>
提供各种丰富的示例及API调用
最后附上文档及仓库地址
# 文档/示例地址
https://dafrok.github.io/vue-baidu-map/
# github地址
https://github.com/Dafrok/vue-baidu-map
ok,就介绍到这里。大家如果有其他Vue地图组件,欢迎一起交流讨论。若是对你的学习有帮助,记得留个印记哈!
猜你喜欢
- 2024-11-24 赶快收藏!图灵前端图书学习路线图
- 2024-11-24 什么是BitMap?BitMap技术的原理和应用
- 2024-11-24 何时使用 Map 来代替普通的 JS 对象
- 2024-11-24 go语言深入Gin框架内幕(二)
- 2024-11-24 WeakMap和Map的区别,WeakMap原理,为什么能被 GC?
- 2024-11-24 2.7k star!MindMap 助你轻松绘制思维导图,高效工作必备!
- 2024-11-24 Python小知识,如何使用 Map, Filter 和 Reduce 内置函数
- 2024-11-24 解密 JavaScript 中的数据结构:Map vs Object
- 2024-11-24 Vue短文:如何使 Map 和 Set 类型的数据具有响应性?
- 2024-11-24 前端最常用的25个正则表达式,代码效率提高 80%
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 601℃几个Oracle空值处理函数 oracle处理null值的函数
- 593℃Oracle分析函数之Lag和Lead()使用
- 581℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 578℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 573℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 566℃【数据统计分析】详解Oracle分组函数之CUBE
- 552℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 547℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)