【通俗易懂】Vue如何使用百度地图,通过vue-baidu-map插件实现地图功能【文档使用介绍】
现在的地图组件已经是很常用的东西了,基本上都会接触到,那么如何使用呢,相信很多新手会有点懵
这里就把基础的用法说一遍,然后说一下如何看文档。这样你就可以自己去添加功能了。
效果图
我做的是PC端的
目前的基础功能就是自动定位城市,然后可以检索地点。这也是通用最常用的基础功能了。
第一步:先下载插件
npm install vue-baidu-map --save
第二部:全局注册一下,在main.js里面
提示:密钥不填是地图出不来的哦。
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {ak: '这个地方填你的ak密钥' //这个地方是官方提供的ak密钥
})
ak密钥在哪里来呢
就是从百度地图的开放平台申请的,自己去注册一下然后申请一个ak密钥就行了。
第一步:百度搜索百度地图,进去,最下面有个开放平台点进去
第二部:控制台点进去
第三步:申请你的密钥,如果有了后,在这个里面可以看到,那个一大串的访问应用AK就是
先上完整代码
//我已经代码都注释了,相信应该看得懂意思。不懂得下面我们继续看文档怎么看
<template><div><el-card style="height: 89vh"><el-inputplaceholder="请输入地址"v-model="input3"class="input-with-select"><el-button slot="append" icon="el-icon-search" @click="inputfz">搜索</el-button></el-input><!-- scroll-wheel-zoom是是否可以缩放@ready是图加载完后触发事件center是位置定位zoom是缩放大小限制inertial-dragging是允许惯性拖拽--><baidu-mapclass="bm-view":zoom="15":center="center"inertial-dragging@ready="mapReady":scroll-wheel-zoom="true"><!-- 定位控件 anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 --><bm-geolocationanchor="BMAP_ANCHOR_BOTTOM_RIGHT":showAddressBar="true":autoLocation="true"></bm-geolocation><!-- 地区检索 keyword:关键字搜索 @searchcomplete:检索完成后的回调函数 auto-viewport:检索结束后是否自动调整地图事业 --><bm-local-search:keyword="keyword"@searchcomplete="search":auto-viewport="true"class="search"></bm-local-search><!-- 缩放控件 anchor代表控件停靠位置 anchor="BMAP_ANCHOR_TOP_RIGHT"代表放在右上角--><bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation></baidu-map></el-card></div>
</template><script>
//引入组件
import {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker,BmGeolocation,
} from "vue-baidu-map";
export default {data() {return {//定位位置信息center: {},//检索关键字keyword: "",//输入框input值input3: "",};},//需要引入的组件components: {BaiduMap,BmControl,BmView,BmAutoComplete,BmLocalSearch,BmMarker,BmGeolocation,},methods: {//输入框inputfz() {this.keyword = this.input3;},//地图加载后的回调mapReady({ BMap, map }) {//保存this指向,因为在百度的回调中this不指向vueconst _this = this;// 获取自动定位方法var geolocation = new BMap.Geolocation();// 获取自动定位获取的坐标信息geolocation.getCurrentPosition(function (r) {//可以conso.log看一下这个r,他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位_this.center = {lng: r.point.lng,lat: r.point.lat,};},//启用高精度{ enableHighAccuracy: true });},},
};
</script><style scoped>
/* 给个宽高 */
.bm-view {height: 400px;width: 700px;
}
.input-with-select {width: 400px;margin-bottom: 5px;
}
.search {height: 300px;overflow: auto;
}
</style>
vue-baidu-map的文档,不懂得可以查看
vue-baidu-map文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/index
注意:这个文档并没有搜索功能,无法搜索属性名直接定位到解释那边。只能通过控件名来区分。
第一步:看一下你的控件名是啥
第二步:文档内看这个位置,对应上的,再找属性的解释
看到没有,到这里大家应该看明白了吧,其实就是你们的组件名,我就不再多截图举例了,然后你们就可以对应这个控件名,找该控件下面的属性是什么意思了。
以后你们再添加功能,就文档上看,然后把对应的空间写在baidu-map内就行,然后添加对应空间的属性来添加功能。注意些这个都是小写哈,文档上空间名有大写,但是写在html内标签名统一小写。
【通俗易懂】Vue如何使用百度地图,通过vue-baidu-map插件实现地图功能【文档使用介绍】相关推荐
- vue 页面使用百度地图
前言 vue 3.x 百度地图JavaScript API GL v1.0 百度地图的源码编辑器:http://lbs.baidu.com/jsdemo.htm#webgl0_0 本文代码在百度地图的 ...
- Vue项目使用百度地图——经纬度地图组件的封装及使用
1 前言 要在vue项目使用百度地图api,首先应做以下配置 (1)index.html index.html添加script <script src="http://api.map. ...
- vue项目引入百度地图BMapGL鼠标绘制和BMap辅助工具
目录 引言 1.引用百度地图 2.在项目中使用百度地图 2-1.页面结构部分 2-2.js逻辑部分 3-1.页面结构部分 Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架.它旨 ...
- vue中调用百度地图 获取经纬度
项目中,需要实现获取当前位置的经纬度,或者搜索某个位置并获取经纬度信息,我使用的的是vue,地图使用的是百度地图. 默认自动获取当前位置经纬度 拖动小红标 获取经纬度 关键词 查询获取经纬度 前期准备 ...
- vue集合离线百度地图
vue集合离线百度地图 vue.js百度地图api离线 发布于 1月9日 一.需求场景 所谓离线,大概都是项目在内网中使用,无法连接外网,所以需要开发离线地图功能. 在看以下步骤前,先提示这个vue项 ...
- Vue中使用百度地图做路径分析并根据起终点坐标模拟道路里程桩
1.我们先要在vue中引入百度地图的API 第一步:在vue中的index.html文件中加上一个script标签: <script type="text/javascript&quo ...
- Vue中使用百度地图
安装 npm $ npm install vue-baidu-map --save cdn <script src="https://unpkg.com/vue-baidu-map&q ...
- vue + echarts + ( bmap) 百度地图 实现公交、骑行、车辆 轨迹图
vue + echarts + ( bmap) 百度地图 实现公交.骑行.车辆 轨迹图 最终目标 最终目标:个性化的实现公交路线图 先看看效果以免白看一场,如果你是想实现类似的效果可以继续往下看 码起 ...
- VUE中使用百度地图BaiduMap
VUE中使用百度地图BaiduMap 以前在html页中使用了echart,做了很多图表,也集成了百度地图,效果很好.最近,开始研究vue加 .net core的框架,所以也想把echart和百度地图 ...
- vue中调用百度地图实现搜索等功能
vue中调用百度地图实现搜索等功能 在最近做电商项目时用户订单等物流信息想做的更加详细点所以加入了地图这个小功能,不是很难只是在一个未知的领域可能有点迷茫 现在也是体会到了,学新的东西还是得看官方文档 ...
最新文章
- 2021牛客暑期多校训练营3 I-Kuriyama Mirai and Exclusive Or (差分+位运算)
- JS中的let和var的区别
- Hyper-V的实验安装----1
- vue 初始化方法_Vue源码解读(一)引入Vue做了什么
- 设计模式C++实现--Interpreter模式
- 数字类 default 0和 default 0_数字化转型从0到N,只需这三步
- 《机器学习实战》笔记(02):k-近邻算法
- python3正式发布时间_Python3 日期和时间
- Android 应用开发(31)---界面原型设计
- Object类解析(简)
- PLSQL如何将千万数据快速插入到另一张表中_数据库设计中的 9 大常见错误
- windows程序设计基础知识
- dct变换编码研究课设实验报告_信息隐藏实验3
- 计算机科技英语写作,英语科技写作
- 安装 Windows 7 VM虚拟机
- python元组使用什么界定符_CookBook/2-Python3基本语法.md at master · Byron4j/CookBook · GitHub...
- 局域网中的每台计算机主机扩展槽,计算机导论选择题
- HuaWei ❀ Virtual Firewalld 虚拟防火墙
- linux之cut的使用
- Centos7安装MPICH3在配置安装目录时出现问题