【通俗易懂】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内标签名统一小写。