vue项目弹窗中使用百度地图

使用场景：

点击出现弹窗中显示该小区在地图中的位置

 

 

父组件中引用：
<Map v-if="this.showMap" @closeDialog="closeDialog" :project_id="it.project_id" :project_name="it.project_name"></Map>

 

地图组件：
<template>
<div class="map-wrap" >
  <el-dialog
    custom-class='dia-wrap'
    :visible.sync="visible"
    @close='closeDialog'>
    <span slot="title">
      楼盘位置信息说明
    </span>
    <div class="con">
      <ul class="info">
        <li class="auto">
          <div class="th">楼盘名称：</div>
          <div class="td">{{houseName}}</div>
        </li>
        <li class="auto">
          <div class="th">楼盘位置：</div>
          <div class="td">（经度：{{location.lng}} 纬度：{{location.lat}}）</div>
        </li>
      </ul>
      <div class="map-container" >
        <div id="map"></div>
        <div class="search">
          <div class="up-error">
            <el-checkbox v-model="checked"></el-checkbox>
            楼盘位置有误？点击报错
          </div>
          <div id="find-house" v-show="checked">
            <input type="text" id="suggestId" placeholder="请输入楼盘正确位置帮助我们及时更正"/>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancleEdit">取 消</el-button>
      <el-button type="primary" @click="selectLocation">确 定</el-button>
  </span>
  </el-dialog>
</div>
</template>

<script>
import BMap from 'BMap'
export default {
  props: ['project_id', 'project_name', 'showMap'],
  data () {
    return {
      val: '',
      location: {
        lng: '',
        lat: ''
      },
      map: {},
      ac: {},
      visible: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      //  对父组件传过来的值 重新进行赋值
      this.getAddress()
    })
  },
  methods: {
    closeDialog () {
      this.visible = false
      this.$emit('closeDialog', false)
    },
    // 初始化地图
    setMap (lat, lng) {
      // 要给初始化的地图组件设置宽高  否则不显示
      this.map = new BMap.Map('map')
      this.map.clearOverlays()
      // 创建坐标点
      let point = new BMap.Point(lat, lng)
      let marker = new BMap.Marker(point)
      // 给地图上添加标注
      this.map.addOverlay(marker)
      // 以这个坐标点为地图中心
      this.map.centerAndZoom(point, 17)
      // 鼠标缩放
      this.map.enableScrollWheelZoom(true)
    },
    // 搜索位置功能实现
    setSearch () {
      const _this = this
      // 建立一个自动完成的对象
      this.ac = new BMap.Autocomplete({'input': 'suggestId', 'location': _this.map})
      let myValue
      // 鼠标点击下拉列表后的事件
      this.ac.addEventListener('onconfirm', (e) => {
        if (e && e.preventDefault) {
          e.preventDefault()
        } else {
          let _value = e.item.value
          myValue = _value.province + _value.city + _value.district + _value.street + _value.business
          this.checkAddress = myValue
        }
      })
    },
    // 获取楼盘位置信息
    getAddress () {
      let params = {
        xxx: xxx
      }
      this.axios.get('api', {params: params})
        .then((res) => {
          if (res.data.code === 0) {
            let resData = res.data.data
            this.location.lat = parseFloat(resData.lat)
            this.location.lng = parseFloat(resData.lng)
            this.$nextTick(() => {
              //  在获取经纬度后初始化地图 这样就解决第一次没有经纬度而导致空白的问题
              this.setMap(this.location.lat, this.location.lng)
              this.setSearch()
            })
          }
        })
    }
  }
}
</script>