Vue-Baidu Map获取选中点的经纬度以及详细地址

小鱼儿心语 :

无论生活怎样，都不要忘记微笑，愿你成为自己的太阳，无需凭借谁的光。

今天给大家分享下在 Vue 项目中使用 Baidu Map 的详细过程！！！

一、注册百度账号以及密钥（ak）

一、注册百度账号
二、申请成为百度开发者
三、获取服务密钥（ak）
四、使用相关服务功能

大家此时一定有很多疑问，申请（ak）到底要怎么填写呢？

申请（ak）究竟怎么填呢.png

1、应用名称：这个就填写项目的英文简称就可以，这个可以随意一点，例如：我们是主做物流这块的，所以我填的是：“logistics”！

2、应用类型：我本人选择的是 浏览器端，这个具体看你们公司的项目类型把！

3、Referer白名单：格式：*.mysite.com*,*myapp.com* 多个域名之间请用英文半角逗号隔开； 如果呢项目正处在测试阶段的话就设置为英文半角星号* 就可以了！！！

二、快速上手

安装

---

npm install vue-baidu-map --save

使用

---

• 全局注册

main.js文件

import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, { ak: '你的密钥' })

index.html 文件

该文件如果项目目录中没有的话，也可能在某个文件夹内，一定有哦，耐心找找！！！

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>

• 局部注册

如果有按需引入组件的需要，可以选择局部注册百度地图组件，局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 components 文件夹下，按需引用即可。

三、具体实操

<template>
  <el-dialog slot="—" :title="title" :width="width" :visible.sync="showMapComponent" top="5vh" custom-class="baidu-map" @close="cancel">
    <baidu-map
      :style="mapStyle"
      ak="你的密钥"
      :map-click="false"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @click="getClickInfo"
      @moving="syncCenterAndZoom"
      @moveend="syncCenterAndZoom"
      @ready="onBaiduMapReady"
      @zoomend="syncCenterAndZoom"
    >
      <bm-view style="width: 100%; height: 100%;" />
      <bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true" animation="BMAP_ANIMATION_BOUNCE" />
      <bm-control :offset="{width: '10px', height: '10px'}">
        <bm-auto-complete v-model="keyword" :sug-style="{zIndex: 999999}">
          <el-input v-model="keyword" type="text" placeholder="请输入地名关键字" clearable>
            <i slot="prefix" class="el-input__icon el-icon-search" />
          </el-input>
        </bm-auto-complete>
      </bm-control>
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" show-address-bar auto-location />
      <bm-local-search :keyword="keyword" :auto-viewport="true" :panel="false" />
    </baidu-map>
    <span slot="footer">
      <el-button icon="el-icon-close" @click="cancel">取 消</el-button>
      <el-button icon="el-icon-place" type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch, BmMarker, BmGeolocation } from 'vue-baidu-map'
export default {
  components: {
    BaiduMap,
    BmControl,
    BmView,
    BmAutoComplete,
    BmLocalSearch,
    BmMarker,
    BmGeolocation
  },
  props: {
    // 在子组件中使用 props 选项去接收来自父组件传递过来的数据
    dialogVisible: Boolean,
    mapHeight: {
      type: Number,
      default: 450
    },
    title: {
      type: String,
      default: '选择目标位置'
    },
    width: {
      type: [Number, String],
      default: '85%'
    },
    height: {
      type: [Number, String],
      default: '80%'
    }
  },
  data: function() {
    return {
      BMap: null, // 地图组件是否就绪
      showMapComponent: this.dialogVisible,
      keyword: '', // 地区搜索的信息
      mapStyle: {
        width: '100%',
        height: this.mapHeight + 'px'
      },
      center: { lng: 116.404, lat: 39.915 },
      choosedLocation: { province: '', city: '', district: '', addr: '' },
      zoom: 15
    }
  },
  watch: {
    dialogVisible: function(currentValue) {
      this.showMapComponent = currentValue
      if (currentValue) {
        this.keyword = ''
      }
    }
  },
  methods: {
    // ready事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 BMap 类和 map 实例进行手动控制
    onBaiduMapReady(e) {
      console.log('返回BMap类和map实例', e)
      const that = this
      this.BMap = e.BMap
      if (this.BMap) {
        // 获取定位地址信息并赋值给声明变量
        // Geolocation 对象的 getCurrentPosition()、watchPosition()、clearWatch() 方法详解 ：https://blog.csdn.net/zyz00000000/article/details/82774543
        const geolocation = new this.BMap.Geolocation()
        // 通过 getCurrentPosition() 方法：获取当前的位置信息
        geolocation.getCurrentPosition(res => {
          console.log('返回详细地址和经纬度', res)
          const { lng, lat } = res.point
          const { province, city, district, street, street_number } = res.address

          that.center = { lng, lat }
          that.choosedLocation = { province, city, district, addr: street + street_number, lng, lat }
        })
      }
    },

    /** *
     * 地图点击事件。
     */
    getClickInfo(e) {
      // 调整地图中心位置
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat

      // 此时已经可以获取到BMap类
      if (this.BMap) {
        const that = this
        // Geocoder() 类进行地址解析
        // 创建地址解析器的实例
        const geoCoder = new this.BMap.Geocoder()
        // getLocation() 类--利用坐标获取地址的详细信息
        // getPoint() 类--获取位置对应的坐标
        geoCoder.getLocation(e.point, function(res) {
          console.log('获取经纬度', e.point, '获取详细地址', res)
          const addrComponent = res.addressComponents
          const surroundingPois = res.surroundingPois
          const province = addrComponent.province
          const city = addrComponent.city
          const district = addrComponent.district
          let addr = addrComponent.street
          if (surroundingPois.length > 0 && surroundingPois[0].title) {
            if (addr) {
              addr += `-${surroundingPois[0].title}`
            } else {
              addr += `${surroundingPois[0].title}`
            }
          } else {
            addr += addrComponent.streetNumber
          }
          that.choosedLocation = { province, city, district, addr, ...that.center }
        })
      }
    },

    syncCenterAndZoom(e) {
      // 返回地图当前的缩放级别
      this.zoom = e.target.getZoom()
    },
    /** *
     * 确认
     */
    confirm: function() {
      this.showMapComponent = false
      this.$emit('map-confirm', this.choosedLocation)
    },
    /** *
     * 取消
     */
    cancel: function() {
      this.showMapComponent = false
      this.$emit('cancel', this.showMapComponent)
    }
  }
}
</script>

<style lang="scss">
.baidu-map {
  .el-dialog__body {
    padding: 5px !important;
  }
}
</style>

最后效果如下所示：

百度地图示例.png

• 接下来呢，我给大家详细解析下我所引入得各个组件含义

• BaiduMap —— 局部注册

---

• BmControl —— 允许开发者自由定制控件

---

• BmView—— 渲染地图视图
  1、BmView 用于渲染百度地图实例可视化区域的容器，通常与 LocalSearch 等会输出其它视图的组件结合使用；
  2、当 BaiduMap 组件中没有挂载 BmView 组件时，百度地图实例将渲染在 <baidu-map> 节点上;
  3、当 BaiduMap 组件中挂载了 BmView 组件时，百度地图实例将渲染在 <bm-view> 节点上；
  4、每个 BaiduMap 组件应对应唯一一个 BmView 组件，如果声明了多个 BmView 组件，只有第一个能被正常渲染；
  5、该组件主要用于控制布局，除了能够渲染地图视图之外，没有任何其它用途。

---

• BmAutoComplete—— 自动填充组件
  1、因为它的定制性较差，如果对检索框没有高级的UI定制需求，就使用这个就好了，将返回的数据配合您自定义的UI组件进行开发；
  2、自动填充组件弹出的检索框有时会被其它层覆盖，此时需要在 sugStyle 属性中声明 zIndex 加以调整。

---

• BmLocalSearch—— 地区检索

---

• BmMarker—— 自定义覆盖点、标记点

---

• BmGeolocation—— 地区定位控件

---

• BmNavigation—— 导航控件

• 接下来呢，我给大家详细解析下我所使用的各个标签、以及标签内的属性的含义

1、标签带el的是 element-UI 插件中的组件

2、标签带bm的是 VUE BAIDU MAP 百度地图中引用的组件

• <el-dialog></el-dialog>—— 弹出一个对话框
  1、custom-class：Dialog 的自定义类名；
  2、slot="-" : 表示dialog的内容；
  3、slot="footer" ：Dialog 按钮操作区的内容
• <baidu-map></baidu-map>—— 百度地图容器
  1、用于挂载百度地图核心类和一个百度地图实例，是所有地图组件的根组件；
  2、实质上是一个空的DOM节点，可以用于挂载 BmView 组件或其它DOM节点或组件；
  3、如果你需要二次开发或者是手动控制其子组件，可以使用在 ready 事件中使用返回的 BMap 类和 map 实例进行手动控制，来获取想要的数据；
  4、ready事件：在你需要二次开发或手动控制其子组件，可以使用在此事件中使用返回的 BMap 类和 map 实例进行手动控制；
  5、moving： 地图移动过程中触发此事件；
  6、moveend：地图移动结束时触发此事件;
  7、zoomend：地图更改缩放级别结束时触发此事件;
  8、ak：百度地图开发者平台申请的密钥，仅在局部注册组件时声明;
  9、center：此处我使用对象形式如：{lng：'',lat:''} 表示经纬度，也可以使用如：'太原市万柏林区'的地区字符串;
  10、zoom：表示缩放等级;
  11、scroll-wheel-zoom：允许鼠标滚轮缩放;
  12、map-click：允许点击，该项仅在地图组件挂载时加载一次。
• <bm-view></bm-view>—— 渲染一个地图实例
  1、当 BaiduMap 挂载了 BmView 组件时，百度地图实例将渲染在 <bm-view> 节点上;
  2、每个 BaiduMap 组件应对应唯一一个 BmView 组件，如果声明了多个 BmView 组件，只有第一个能被正常渲染;
  3、该组件主要用于控制布局。除了能够渲染地图视图以外，没有任何其它用途。
• <bm-marker></bm-marker>—— 自定义覆盖点：红色点
  1、:dragging="true"：允许拖拽;
  2、animation="BMAP_ANIMATION_BOUNCE"：反复弹跳;
• <bm-navigation></bm-navigation>—— 缩放控件
  1、anchor="BMAP_ANCHOR_TOP_RIGHT"：控件停靠的位置;
• <bm-control></bm-control>—— 自定义控件
  1、:offset="{width: '10px', height: '10px'}"：控制偏移量;
• <bm-auto-complete></bm-auto-complete>—— 自动填充组件
  1、因为它的定制性较差，如果对检索框没有高级的UI定制需求，就使用这个就好了，将返回的数据配合您自定义的UI组件进行开发;
  2、弹出的检索框有时会被其它层覆盖，此时需要在 sugStyle 属性中声明 zIndex 加以调整;
• <bm-geolocation></bm-geolocation>—— 定位组件
  1、anchor-- 控件停靠位置;
  2、showAddressBar-- 默认显示定位信息面板;
  3、autoLocation-- 添加控件时是否进行定位，默认不定位;
• <bm-local-search></bm-local-search>—— 地区检索
  1、keyword-- 搜索关键字;
  2、autoViewport-- 检索结束后是否自动调整地图视野;
  3、panel-- 是否展现检索结果面板;

好了，今天就跟大家分享到这里了，有不懂的或是有技术瑕疵的尽情留言哦，同时也希望能够帮助到刚接触百度地图的宝宝们~~~