当前位置:   article > 正文

【通俗易懂】Vue如何使用百度地图,通过vue-baidu-map插件实现地图功能【文档使用介绍】_vue baidu map

vue baidu map

现在的地图组件已经是很常用的东西了,基本上都会接触到,那么如何使用呢,相信很多新手会有点懵
这里就把基础的用法说一遍,然后说一下如何看文档。这样你就可以自己去添加功能了。

效果图

我做的是PC端的
目前的基础功能就是自动定位城市,然后可以检索地点。这也是通用最常用的基础功能了。
在这里插入图片描述

第一步:先下载插件

npm install vue-baidu-map --save
  • 1

第二部:全局注册一下,在main.js里面

提示:密钥不填是地图出不来的哦。

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: '这个地方填你的ak密钥'  //这个地方是官方提供的ak密钥
})
  • 1
  • 2
  • 3
  • 4

ak密钥在哪里来呢

就是从百度地图的开放平台申请的,自己去注册一下然后申请一个ak密钥就行了。
第一步:百度搜索百度地图,进去,最下面有个开放平台点进去
在这里插入图片描述
第二部:控制台点进去
在这里插入图片描述
第三步:申请你的密钥,如果有了后,在这个里面可以看到,那个一大串的访问应用AK就是
在这里插入图片描述

先上完整代码

//我已经代码都注释了,相信应该看得懂意思。不懂得下面我们继续看文档怎么看

<template>
  <div>
    <el-card style="height: 89vh">
      <el-input
        placeholder="请输入地址"
        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-map
        class="bm-view"
        :zoom="15"
        :center="center"
        inertial-dragging
        @ready="mapReady"
        :scroll-wheel-zoom="true"
      >
        <!-- 定位控件   anchor="BMAP_ANCHOR_BOTTOM_RIGHT"代表放在右下角 -->
        <bm-geolocation
          anchor="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不指向vue
      const _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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122

vue-baidu-map的文档,不懂得可以查看

vue-baidu-map文档地址:https://dafrok.github.io/vue-baidu-map/#/zh/index

注意:这个文档并没有搜索功能,无法搜索属性名直接定位到解释那边。只能通过控件名来区分。

第一步:看一下你的控件名是啥
在这里插入图片描述
第二步:文档内看这个位置,对应上的,再找属性的解释
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

看到没有,到这里大家应该看明白了吧,其实就是你们的组件名,我就不再多截图举例了,然后你们就可以对应这个控件名,找该控件下面的属性是什么意思了。

以后你们再添加功能,就文档上看,然后把对应的空间写在baidu-map内就行,然后添加对应空间的属性来添加功能。注意些这个都是小写哈,文档上空间名有大写,但是写在html内标签名统一小写。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/109863
推荐阅读
相关标签
  

闽ICP备14008679号