vue使用百度地图，后台返回地区名获取经纬度并显示在地图上

image.png

1、百度地图引用成功后，给地图一个容器

<div class="search">
    作业时间：<el-date-picker
            v-model="dataForm.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择日期"
            style="margin-right: 0.1rem">
    </el-date-picker>
    <el-button   type="primary" @click="selectRoutePlanning">查询</el-button>
    <el-button @click="taskAlloc">分配</el-button>
</div>
<el-card shadow="never" class="aui-card--fill">
    <div class="task">
        <div class="map" id="allmap"></div>  //地图容器
    </div>
</el-card>

2、创建map，如果项目有eslint校验，会报错BMap 未定义，需在eslint文件加上，创建实例时也需加上/* global BMap */

image.png

.eslintrc.js

image.png

使用地图代码部分

return {
  dataListLoading: false,
  allocUpdateVisible: false,
  daterange: null,
  dataList: [],
  lnglats: [],
  value: '',
  add: '',
  index: 0,
  myGeo: '',
  map: '',
  pointId: [],
  newArr: [],
  coordinateList: [],
  objData: [],
  objectData: {},
  adds: [],
  addsId: [],
  coordinate: {
    pointId: '',
    addsId: ''
  },
}

··························································································

getAllocaData () {
  let that = this
  that.dataListLoading = true
  that.$http.get(
    that.mixinViewModuleOptions.getDataListURL,
    {
      params: {
        startDate: that.dataForm.startDate
      }
    }
  ).then(({ data: res }) => {
    that.dataListLoading = false
    if (res.code !== 0) {
      return that.$message.error(res.msg)
    }
    that.adds = res.data
    that.shaowMap()
  }).catch(() => {
    that.dataListLoading = false
  })
},

shaowMap () {
  /* global BMap */
  this.map = new BMap.Map('allmap') // 创建Map实例
  this.map.centerAndZoom(new BMap.Point(121.427435, 28.662194), 8)
  this.map.enableScrollWheelZoom(true)
  this.myGeo = new BMap.Geocoder()
  this.bdGEO()
}
bdGEO () {
  if (this.adds[this.index]) {
    this.add = this.adds[this.index].operationAddress
    this.geocodeSearch(this.add, this.adds[this.index].id)
    this.index++
  } else {
    console.log('暂无点')
  }
},
geocodeSearch (add, id) {
  let that = this
  if (that.index <= that.adds.length) {
    setTimeout(that.bdGEO, 100)
  }
  that.myGeo.getPoint(add, function (point) {
    if (point) {
      var marker = new BMap.Marker(point)
      that.map.addOverlay(marker)
      var opts = {
        position: point, // 指定文本标注所在的地理位置
        offset: new BMap.Size(1, -50) // 设置文本偏移量
      }
      var label = new BMap.Label(add, opts) // 创建文本标注对象
      label.setStyle({
        color: 'red',
        fontSize: '15px',
        height: '20px',
        lineHeight: '20px',
        border: 'none'
      })
      that.map.addOverlay(label)
      marker.addEventListener('click', function () { //点击标注点获取经纬度
        that.coordinate.pointId = point
        that.coordinate.addsId = id
        if (that.newArr.length === 0) {
          that.newArr.push(that.coordinate.addsId)
          that.pointId.push(that.coordinate.pointId.lat)
          that.coordinateList.push(that.coordinate.pointId.lng)
        } else {
          let counts = 0
          for (let i = 0; i < that.newArr.length; i++) {
            if (that.newArr[i] === that.coordinate.addsId) {
              console.log(1)
            } else {
              counts++
            }
          }
          if (counts === that.newArr.length) {
            that.newArr.push(that.coordinate.addsId)
            that.pointId.push(that.coordinate.pointId.lat)
            that.coordinateList.push(that.coordinate.pointId.lng)
          } else {
            that.$message.error('该地点已选择')
          }
        }
        for (let i = 0; i < that.newArr.length; i++) {
          that.objectData = {
            id: that.newArr[i],
            lat: that.pointId[i],
            lng: that.coordinateList[i]
          }
        }
        that.objData.push(that.objectData)
      })
    } else {
      console.log('您选择地址没有解析到结果!')
    }
  }, '杭州市')
},