后台管理百度地图-获取位置信息

 1.在输入框中输入位置获取经纬度，拿到经纬度用定点标记在地图上

2.鼠标点击地图中的位置，调用组件点击事件拿到经纬度用定点标记在地图上，删除之前的定点标记，拿到的地址赋值到输入框中，

 引入百度地图： 

确定

     

  data() {
    return {
      map: {},
      point: {},
      marker: {},
      geocoder: {},
      address:''
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.map = new BMapGL.Map('container')
      var zoomCtrl = new BMapGL.ZoomControl()// 添加缩放控件
      this.map.addControl(zoomCtrl)
      this.geocoder = new BMapGL.Geocoder()
      //点击地图获取的回调函数
      this.map.addEventListener('click', (e) => {
        this.addPoint(e.latlng, true)
      })
    })
  },
  methods: {
    //封装一个方法，传入两个参数p:经纬度,center:布尔-设置地图的中心点和缩放级别
    addPoint(p, center) {
      this.map.removeOverlay(this.marker)//删除上次定点标记
      let lng = p.lng
      let lat = p.lat
      this.point = new BMapGL.Point(lng, lat)
      this.marker = new BMapGL.Marker(this.point)//创建一个新的标注点
      this.map.addOverlay(this.marker)//将标注点对象添加到地图上
      this.addGeocoder(this.marker.point)//根据经纬度获取位置信息
      if (center) {
        this.map.centerAndZoom(this.point, 18)//设置地图的中心点和缩放级别
      }
    },
    //根据经纬度获取位置信息
    addGeocoder(point) {
      this.geocoder.getLocation(this.point, (point) => {
        this.address = point.address
      })
    },
}

回显： this.point = new BMapGL.Point(lng, lat); this.addPoint(this.point, true)

输入地址点击确定获取经纬度和定点 :

   mapSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const geocoder = new BMapGL.Geocoder()
          geocoder.getPoint(this.address, (point) => {
            if (point) {
              this.addPoint(point, true)
            } else {
              alert('地址解析失败，请输入有效的地址！')
            }
          })
        } else {
          return this.$message.error('你还有信息没有填写')
        }
      })
    },