请你扮演一个资深前端，用vue结合百度地图写一个通过按钮打开弹框（el-dialog），在地图上选择点位，获取经纬度及名称的功能

好的，我来为您介绍如何用Vue结合百度地图实现这个功能。

首先，我们需要引入百度地图的JavaScript API，可以在index.html文件中引入：

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的AK值"></script>

其中，AK值是您在百度地图开放平台申请的开发者密钥。

然后，我们在Vue组件中使用el-dialog组件来实现弹框的效果。在弹框中添加一个div元素，用来显示百度地图。

<template>
  <div>
    <el-button type="primary" @click="showDialog">打开弹框</el-button>
    <el-dialog :visible.sync="dialogVisible" title="选择点位" @close="handleCloseDialog">
      <div id="mapContainer" style="height: 400px;"></div>
    </el-dialog>
  </div>
</template>

接着，在Vue组件的script中，我们需要在mounted生命周期中初始化地图，并添加地图点击事件，获取用户选择的点位信息。

<script>
  export default {
    data() {
      return {
        dialogVisible: false, // 弹框显示状态
        map: null, // 地图对象
        marker: null, // 标记点对象
        point: {}, // 用户选择的点位信息
      }
    },
    mounted() {
      // 初始化地图
      this.map = new BMap.Map("mapContainer");
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 设置地图中心点和缩放级别
      this.map.enableScrollWheelZoom(true); // 启用地图滚轮缩放

      // 添加地图点击事件
      this.map.addEventListener("click", e => {
        const point = {
          lng: e.point.lng,
          lat: e.point.lat,
          name: '',
        };
        this.point = point;
        this.showMarker(point); // 在地图上添加标记点
      });
    },
    methods: {
      // 打开弹框
      showDialog() {
        this.dialogVisible = true;
      },
      // 关闭弹框
      handleCloseDialog() {
        this.dialogVisible = false;
        this.map.clearOverlays(); // 清除所有覆盖物
      },
      // 在地图上添加标记点
      showMarker(point) {
        if (this.marker) {
          this.map.removeOverlay(this.marker); // 清除之前的标记点
        }
        const pt = new BMap.Point(point.lng, point.lat);
        this.marker = new BMap.Marker(pt);
        this.map.addOverlay(this.marker);
        this.map.panTo(pt); // 将地图中心移动到标记点处
      },
    },
  }
</script>

最后，我们可以在弹框中添加输入框，让用户输入点位名称，并在确认按钮点击事件中获取用户输入的信息并关闭弹框。

<el-dialog :visible.sync="dialogVisible" title="选择点位" @close="handleCloseDialog">
  <div id="mapContainer" style="height: 400px;"></div>
  <el-form>
    <el-form-item label="名称">
      <el-input v-model="point.name"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="handleCloseDialog">取 消</el-button>
    <el-button type="primary" @click="handleConfirm">确 定</el-button>
  </div>
</el-dialog>

<script>
  export default {
    // ...
    methods: {
      // ...
      // 确认选择点位
      handleConfirm() {
        this.dialogVisible = false;
        this.$message.success(`您选择了点位：${this.point.name}，经度：${this.point.lng}，纬度：${this.point.lat}`);
      },
    },
  }
</script>

这样，我们就成功地用Vue结合百度地图实现了通过按钮打开弹框，在地图上选择点位，获取经纬度及名称的功能。