vue-使用Baidu（百度地图）实现输入位置获取定位经纬度_vue获取当前定位坐标

前言

• 开发中我们需要地图定位，就是用户输入位置，自动定位获取经纬度，传递给后端存在数据库

• 找了一圈发现千篇一律，最后也是使用element的搜索输入款配合原生百度地图实现这个功能

• 点击地图需要逆地址解析，输入地址时调用百度地图渲染在下拉框，选择传输地址，经纬度

• 一般是在添加时加载地图，可能会因为网络原因加载地图实例失败，所以需要一直加载到实例

• 在项目中工具文件形式引入，相当于创建了一个<script>标签引入地图资源，挂在在全局上

效果图

代码实现-直接复制需要申请AK-主页文章有

1.在工具文件下建立utils/loadBMap.js-内容如下

export default function loadBMap (ak) {
  return new Promise(function (resolve, reject) {
    if (typeof window.BMap !== 'undefined') {
      resolve(window.BMap)
      return true
    }
    window.onBMapCallback = function () {
      resolve(window.BMap)
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src =
      'https://api.map.baidu.com/api?v=3.0&ak=' +
      ak +
      '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

​

2.在页面中使用-注意没有写AK-需要换

<template>
  <div class="conter">
    <el-button type="primary" size="small" @click="addbaidu"
      >添加信息</el-button
    >
    <el-dialog title="地图定位" :visible.sync="dialogVisible" @close="close" width="30%">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="归属地址：" prop="building">
          <el-autocomplete
            style="width: 100%"
            v-model="form.building"
            :fetch-suggestions="querySearchAsync"
            :trigger-on-focus="false"
            placeholder="请先搜索地址"
            clearable
            @select="handleSelect"
          >
            <template slot-scope="{ item }">
              <i class="el-icon-search fl mgr10" />
              <div style="overflow: hidden">
                <div class="title">{{ item.title }}</div>
                <span class="address ellipsis">{{ item.address }}</span>
              </div>
            </template>
          </el-autocomplete>
        </el-form-item>
        <el-form-item label="地图定位：">
          <div id="map-container" style="width: 100%; height: 300px" />
        </el-form-item>
        <el-form-item label="经度：">
          <el-input v-model="form.longitude" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="维度：">
          <el-input v-model="form.latitude" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
​
<script>
// 引入第三方工具包
import loadBMap from '@/utils/loadBMap.js'
export default {
  name: 'Baidu',
  data() {
    return {
      // 地图实例
      map: null,
      // Marker实例
      mk: null,
      // 定时器
      initMapeq: null,
      // 表单开关
      dialogVisible: false,
      // 表单
      form: {}
    }
  },
  created() {},
  mounted() {
    // 页面加载完之后，加载百度地图
    // 加载引入BMap
    loadBMap('你的AK')-需要申请主页文章有
  },
  methods: {
    close(){
     this.form = {}
    },
    // 添加开关
    addbaidu() {
      // 打开表单
      this.dialogVisible = true
      // 加载地图
      this.getbaidu()
    },
    // 加载地图方法
    getbaidu() {
      this.showDialog = true
      this.initMapeq = setInterval(() => {
        if (this.initMap()) {
          clearInterval(this.initMapeq)
        }
      })
    },
    // 百度地图封装方法
    // 初始化地图
    initMap() {
      try {
        var that = this
        // 1、挂载地图
        // 创建地图实例
        this.map = new BMap.Map('map-container')
        // 设置中心经纬度  这里我们使用BMapGL命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中120.872845表示经度，32.021089表示纬度。（为南通濠河风景区坐标） 作者：星银色飞行船
        var point = new BMap.Point(
          this.form.longitude || 116.41338729034514,
          this.form.latitude || 39.910923647957596
        )
        // 3.在创建地图实例后，我们需要对其进行初始化，BMapGL.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作
        this.map.centerAndZoom(point, 14)
        // 滚轮缩放
        this.map.enableScrollWheelZoom()
        // 3、设置图像标注并绑定拖拽标注结束后事件
        this.mk = new BMap.Marker(point, { enableDragging: true })
        this.map.addOverlay(this.mk)
      } catch (err) {
        return false
      }
      // 4、添加（右上角）平移缩放控件
      this.map.addControl(
        new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_RIGHT,
          type: BMAP_NAVIGATION_CONTROL_SMALL
        })
      )
      // 7、绑定点击地图任意点事件
      this.map.addEventListener('click', function (e) {
        console.log('点击了', e)
        that.getAddrByPoint(e.point)
      })
      return true
    },
    // 2、逆地址解析函数 根据坐标点获取详细地址  point   百度地图坐标点，必传
    getAddrByPoint(point) {
      var that = this
      var geco = new BMap.Geocoder()
      geco.getLocation(point, function (res) {
        // console.log(res);
        that.mk.setPosition(point)
        that.map.panTo(point)
        that.form.building = res.address
        that.form.longitude = res.point.lng
        that.form.latitude = res.point.lat
      })
    },
    // 8-1、地址搜索
    querySearchAsync(str, cb) {
      // 根据状态码
      var options = {
        onSearchComplete: function (res) {
          var s = []
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            for (var i = 0; i < res.getCurrentNumPois(); i++) {
              s.push(res.getPoi(i))
            }
            cb(s)
          } else {
            cb(s)
          }
        }
      }
      var local = new BMap.LocalSearch(this.map, options)
      local.search(str)
    },
    // 8-2、选择地址
    handleSelect(item) {
      this.form.building = item.address + item.title
      console.log(item);
      this.form.longitude = item.point.lng
      this.form.latitude = item.point.lat
      console.log('lng', item.point.lng)
      console.log('lat', item.point.lat)
      this.map.clearOverlays()
      this.mk = new BMap.Marker(item.point)
      this.map.addOverlay(this.mk)
      this.map.panTo(item.point)
    }
  }
}
</script>
​
<style lang="scss" scoped>
.conter {
  // 去除百度地图的图标
  ::v-deep .anchorBL {
    display: none !important;
  }
}
</style>

总结：

经过这一趟流程下来相信你也对 vue-使用Baidu（百度地图）实现输入位置获取定位经纬度 有了初步的深刻印象，但在实际开发中我 们遇到的情况肯定是不一样的，所以我们要理解它的原理，万变不离其宗。加油，打工人！

什么不足的地方请大家指出谢谢 -- 風过无痕