百度地图的使用方法：如何在Vue项目中使用百度地图

官网入口

登录百度帐号

使用百度地图的步骤

1：登陆注册，获取密钥AK（需要自行注册百度地图，实名认证后创建获得）
2：用 npm install vue-baidu-map -s 下载

3.导入依赖

在main.js中导入

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

4.创建vue项目

<template>
  <el-dialog
    title="地图拾取器"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="80%"
    append-to-body
  >
    <el-col
      :span="24"
      style="
        position: absolute;
        top: 55px;
        z-index: 99999;
        left: 0;
        background-color: white;
        padding-top: 30px;
      "
    >
      <el-form :model="mapinfo" label-width="80px">
        <el-col :span="6">
          <el-form-item label="地区">
            <el-input v-model="mapinfo.address" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经度">
            <el-input v-model="mapinfo.lng" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="纬度">
            <el-input v-model="mapinfo.lat" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button @click="selectadddress" style="margin-left: 15px" type="primary"
            >搜索</el-button
          >
          <el-button @click="czadddress()" style="margin-left: 15px" type="primary">重置</el-button>
        </el-col>
      </el-form>
    </el-col>
    <el-col :span="24">
      <div style="height: 62px; width: 100%"></div>
    </el-col>
    <el-row>
      <el-col :span="24" v-if="ismap">
        <baidu-map
          class="bm-view"
          ak="iRAmLBOhhzb3IUcrcChgsdBZGb63QHp2"
          :scroll-wheel-zoom="true"
          :center="centerMess"
          @ready="handler"
          :zoom="zoom"
          @click="fun"
        >
          <bm-marker :position="centerMess" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          </bm-marker>
          <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
          <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT"></bm-city-list>
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
          ></bm-geolocation>
        </baidu-map>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="buthid">关闭</el-button>
      <el-button type="primary" @click="doSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { BaiduMap, BmNavigation, BmCityList, BmGeolocation, BmMarker } from 'vue-baidu-map'
import maps from 'qqmap' //引入腾讯地图
export default {
  data() {
    return {
      BMap: null,
      ismap: false,
      visible: false,
      centerMess: {},
      zoom: 10,
      mapinfo: {
        address: '陕西省西安市新城区北大街25号',
        lng: '108.953598',
        lat: '34.267767',
      },
    }
  },
  components: {
    BaiduMap,
    BmNavigation,
    BmCityList,
    BmGeolocation,
    BmMarker,
    maps
  },
  methods: {
    //重置
    czadddress() {
      this.address = ''
      this.mapinfo.lng = ''
      this.mapinfo.lat = ''
    },
    //初始化
    init(item, type) {
      this.centerMess = {}
      this.ismap = true
      if (type !== 'add') {
        this.mapinfo = {
          address: item.address,
          lng: item.lng,
          lat: item.lat,
        }
        this.lookmap()
      } else {
        this.mapinfo = {
          address: '陕西省西安市新城区北大街25号',
          lng: '108.953598',
          lat: '34.267767',
        }
        this.lookmap()
      }

      this.visible = true
    },
    //搜索
    selectadddress() {
      let that = this
      if (that.mapinfo.address !== '') {
        that.geolocation.getPoint(
          that.mapinfo.address,
          function(res) {
            console.log(that.mapinfo.address, res)
            that.mapinfo.lng = res.lng
            that.mapinfo.lat = res.lat
            that.centerMess = {
              lng: parseFloat(that.mapinfo.lng),
              lat: parseFloat(that.mapinfo.lat),
            }
          },
          that.mapinfo.address,
        )
      } else if (that.mapinfo.lng !== '' && that.mapinfo.lat !== '') {
        that.centerMess = {
          lng: parseFloat(that.mapinfo.lng),
          lat: parseFloat(that.mapinfo.lat),
        }
      } else {
        that.$message({
          message: '请输入搜索条件',
          type: 'warning',
        })
      }
    },
    //获取经纬度
    lookmap() {
      setTimeout(() => {
        this.centerMess = {
          lng: parseFloat(this.mapinfo.lng),
          lat: parseFloat(this.mapinfo.lat),
        }
      }, 100)
    },
  // 点击地图获取对应的经纬度
    fun(type) {
      this.mapinfo.lng = type.Bg.lng
      this.mapinfo.lat = type.Bg.lat
      this.centerMess = {
        lng: parseFloat(this.mapinfo.lng),
        lat: parseFloat(this.mapinfo.lat),
      }
      let that = this
      that.geolocation.getLocation(type.point, function(res) {
        const { title } = res.surroundingPois[0]
        that.mapinfo.address = `${res.address}${title}`
      })
    },
    //地图加载完触发的事件
    handler(e) {
      this.BMap = e.BMap
      this.geolocation = new e.BMap.Geocoder()
    },
    //确定
    doSubmit() {
      let map = {
        lng: this.mapinfo.lng,
        lat: this.mapinfo.lat,
      }
      // 导出经纬度
      this.$emit('change', map, this.mapinfo.address)
      this.visible = false
      this.ismap = false
    },
    buthid() {
      this.visible = false
      this.ismap = false
    },
  },
}
</script>
<style scoped>
.bm-view {
  width: 100%;
  height: 500px;
}
</style>

运行页面如下：

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！