请你扮演一个资深前端，用vue结合百度地图写一个通过按钮打开弹框（el-dialog），然后百度地图在弹框中展示，点击地图某个位置可以直接选择点位，也可以通过搜索地点选择点位，最后通过确定操作关闭弹框并把拿到的经纬度和中文名字展示在页面上，请你写一个完整的案例

好的，我可以帮你完成这个案例。首先，我们需要在Vue项目中安装百度地图SDK的JavaScript API。可以通过以下命令进行安装：

npm install vue-baidu-map --save

然后，我们需要在Vue组件中引入百度地图组件以及el-dialog组件：

<template>
  <div>
    <el-button type="primary" @click="openMapDialog">打开地图</el-button>
    <el-dialog :visible.sync="mapDialogVisible" width="80%" :before-close="beforeMapDialogClose">
      <baidu-map class="map" :center="center" @click="handleMapClick" @ready="handleMapReady">
        <bm-marker v-if="selectedPoint" :position="selectedPoint"></bm-marker>
      </baidu-map>
      <div slot="footer">
        <el-button @click="closeMapDialog">取 消</el-button>
        <el-button type="primary" @click="confirmMapDialog">确 定</el-button>
      </div>
    </el-dialog>
    <div class="result">
      <p>您选择的位置是：{{selectedPointName}}</p>
      <p>经度：{{selectedPoint.lng}}</p>
      <p>纬度：{{selectedPoint.lat}}</p>
    </div>
  </div>
</template>

<script>
import { BaiduMap, Marker } from 'vue-baidu-map'

export default {
  components: {
    BaiduMap,
    Marker,
  },
  data() {
    return {
      mapDialogVisible: false,
      selectedPoint: null,
      selectedPointName: '',
      center: { lng: 116.404, lat: 39.915 },
      map: null,
      localSearch: null,
    }
  },
  methods: {
    openMapDialog() {
      this.mapDialogVisible = true
    },
    closeMapDialog() {
      this.mapDialogVisible = false
    },
    handleMapReady(map) {
      this.map = map
      this.localSearch = new BMap.LocalSearch(map, {
        onSearchComplete: (results) => {
          if (this.localSearch.getStatus() === BMAP_STATUS_SUCCESS) {
            const firstResult = results.getPoi(0)
            if (firstResult) {
              const point = firstResult.point
              this.selectedPoint = { lng: point.lng, lat: point.lat }
              this.selectedPointName = firstResult.title
              map.panTo(point)
            }
          }
        },
      })
    },
    handleMapClick(event) {
      const point = event.point
      this.selectedPoint = { lng: point.lng, lat: point.lat }
      const geoc = new BMap.Geocoder()
      geoc.getLocation(point, (result) => {
        this.selectedPointName = result.address
      })
    },
    confirmMapDialog() {
      this.closeMapDialog()
    },
    beforeMapDialogClose(done) {
      if (this.selectedPoint) {
        done()
      } else {
        done(false)
      }
    },
  },
}
</script>

<style>
.map {
  height: 500px;
  width: 100%;
}
</style>

在这个组件中，我们首先引入了vue-baidu-map组件和el-dialog组件。在Vue实例的data中，我们定义了一些变量来保存地图的状态和用户选择的点位信息。在methods中，我们实现了打开、关闭弹框的逻辑，以及在地图准备就绪后的回调函数、点击地图时的回调函数等。在地图上点击某个点位时，我们通过BMap.Geocoder来获取当前点位的中文名称。在关闭弹框前，我们需要判断用户是否已经选择了一个点位，如果没有则不允许关闭弹框。

最后，我们在页面上展示用户选择的点位信息。

需要注意的是，这个案例中我们使用了ES6的语法，因此需要在webpack配置文件中添加babel-loader来进行转换。