Vue2使用百度地图展示或搜索地点(vue-baidu-map)

①安装插件：yarn add vue-baidu-map

②在main.js中全局注册引入：

import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: 'your_app_key' // 百度地图秘钥
})

④使用一：在地图上展示标注地点

查询并获取某个地点的坐标工具： 拾取坐标系统

<div class="m-map-container">
    <div class="m-map">
        <baidu-map
            class="bmView"
            :scroll-wheel-zoom="false" // 禁止鼠标滚轮缩放
            :dragging="false" // 禁止拖拽
            :double-click-zoom="false" // 禁止鼠标双击缩放
            :map-click="false" // 禁用鼠标点击查看详情
            :center="location"
            :zoom="zoom">
            <bm-marker :position="location" animation="BMAP_ANIMATION_BOUNCE"></bm-marker>
            <bm-view style="width: 100%; height: 480px; flex: 1;border-radius: 5px;"></bm-view>
        </baidu-map>
    </div>
</div>
data () {
    return {
        location: {
            lng: 102.68906,
            lat: 25.049784
        }, // 指定地点的经纬度
        zoom: 20 // 地图缩放比例
    }
}
.m-map-container {
  width: 1200px;
  text-align: center;
  margin: 0 auto;
  background: #fff;
  .m-map {
    margin: 0 auto;
    width: 800px;
    padding-top: 60px;
  }
}
// 移除左下角百度地图版权
/deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL {
  display: none;
}
// 移除左下角百度地图logo
/deep/ div.anchorBL {
  display: none;
}
// 悬浮地图时不展示小手
/deep/ .BMap_mask {
  cursor: default;
}

⑤使用二：在地图上搜索地点，并可通过鼠标点击获取其经纬度及详细地址信息

<template>
  <a-modal
    title="地址坐标"
    :width="980"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
    :footer="null"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-col :lg="12" :md="12">
            <a-form-item>
              <a-input-search
                placeholder="请输入地址"
                enter-button="查询"
                @search="handleSearch"
                v-decorator="['address',{initialValue: defaultAddress}]"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12">
            <a-form-item label="坐标" :labelCol="labelCol" :wrapper-col="wrapperCol">
              <a-input
                v-decorator="['address_coordinates']"/>
            </a-form-item>
          </a-col>
        </a-row>
        <div class="map">
          <!-- 地图点击事件getLocationPoint，获取地点详细信息、经纬度 -->
          <!-- scroll-wheel-zoom：是否可以用鼠标滚轮控制地图缩放，zoom：视图比例 -->
          <!-- dragging：是否可以用鼠标进行拖拽 -->
          <!-- double-click-zoom：是否可以用鼠标双击控制地图缩放 -->
          <!-- map-click：是否可以用鼠标点击查看详情 -->
          <baidu-map
            class="bmView"
            :scroll-wheel-zoom="true"
            :zoom="zoom"
            @click="getLocationPoint"
          >
            <!-- 右上角比例尺控件 -->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!-- 右上角缩放控件 -->
            <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <!-- 左上角地图类型控件 -->
            <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
            <!-- 右下角缩略图 -->
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <!-- 右下角加入定位控件 -->
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <!-- 左上角加入城市列表 -->
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
            <!-- 右上角加入全景控件 -->
            <!-- <bm-panorama anchor="BMAP_ANCHOR_BOTTOM_LEFT"></bm-panorama> -->
            <bm-view class="u-bm-view"></bm-view>
            <bm-local-search :keyword="addressKeyword" :auto-viewport="true" class="u-search"></bm-local-search>
          </baidu-map>
        </div>
        <span class="m-span">
          <a-form-item style="margin-top: 20px;margin-bottom: 10px;">
            <a-button class="u-submit" type="primary" htmlType="submit" @click="handleSubmit">确定</a-button>
            <a-button class="u-cancal" @click="handleCancel">取消</a-button>
          </a-form-item>
        </span>
      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
export default {
  data () {
    return {
      labelCol: {
        lg: { span: 4 },
        md: { span: 4 }
      },
      wrapperCol: {
        lg: { span: 20 },
        md: { span: 20 }
      },
      form: this.$form.createForm(this),
      addParams: {
        mod: 'add'
      },
      defaultAddress: '',
      visible: false,
      confirmLoading: false,
      zoom: 12,
      addressKeyword: ''
    }
  },
  methods: {
    getLocationPoint (e) {
      console.log('e:', e)
      console.log(e.point.lng + ',' + e.point.lat)
      /*
        可以通过在.eslintrc.js中加入：
        globals: {
            BMap: true
        }, // 防止eslint报错：'BMap' is not defined.
        或者直接使用：// eslint-disable-next-line no-undef
      */
      const geoCoder = new BMap.Geocoder() // 创建地址解析器的实例
      /* 利用坐标获取地址的详细信息 */
      geoCoder.getLocation(e.point, res => {
        console.log('res:', res)
        this.form.setFieldsValue({
          // 地址和经纬度
          address: res.address,
          address_coordinates: res.point.lng + ',' + res.point.lat
        })
      })
    },
    handleSearch (value) {
      console.log(value)
      this.addressKeyword = value
    },
    check (value) {
      if (!this.defaultAddress) {
        this.defaultAddress = value
      } else {
        this.form.setFieldsValue({
          address: value
        })
      }
      this.addressKeyword = value
      this.visible = true
    },
    handleSubmit (e) {
      e.preventDefault()
      const { form: { validateFields } } = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.visible = false
          this.confirmLoading = false
          console.log('values:', values)
          this.$emit('ok', values)
        } else {
          this.confirmLoading = false
        }
      })
    },
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
// 移除左下角百度地图版权
/deep/ div.BMap_cpyCtrl.BMap_noprint.anchorBL{
  display: none;
}
// 移除左下角百度地图logo
/deep/ div.anchorBL{
  display: none;
}
.u-bm-view{
   width: 100%;
   height: 500px;
   flex: 1;
}
.m-span{
  text-align: center;
}
.u-submit{
  margin-right: 30px;
  width: 100px;
}
.u-cancal{
  margin-left: 30px;
  width: 100px;
}
/deep/ .BMap_CityListCtrl{
  margin-top: 30px;
  div div {
    .city_content_top{
      height: 36px;
      .cur_city_info{
        position: absolute;
        bottom: 0px;
        height: 24px;
      }
      #city_ctrl_form{
        .sel_city_input{
          height: 24px;
        }
      }
    }
  }
}
.u-search{
  display:none;
}
</style>