请你扮演一个资深前端，用vue+百度地图写一个点击按钮打开一个弹框（el-dialog），弹框中有地图，地图可以选择点位，也可以在弹框中搜索地点在进行选择，写一个封装好的组件

好的，我可以为您提供一个示例代码，使用 Vue 和百度地图 API 实现这个功能。

首先，您需要在页面中引入 Vue 和百度地图的 JavaScript SDK：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://api.map.baidu.com/api?v=3.0&ak=您申请的AK"></script>

接着，您可以创建一个名为 `BaiduMapDialog` 的 Vue 组件，用于显示地图和弹框：

<template>
  <el-dialog :visible.sync="dialogVisible">
    <div style="height: 400px;">
      <div ref="mapContainer" style="height: 100%;"></div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      map: null,
      marker: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map(this.$refs.mapContainer);

      // 初始化地图，设置中心点和缩放级别
      const point = new BMap.Point(116.404, 39.915);
      this.map.centerAndZoom(point, 15);

      // 添加控件和标记
      this.map.addControl(new BMap.NavigationControl());
      this.map.addControl(new BMap.ScaleControl());
      this.map.addControl(new BMap.OverviewMapControl());
      this.map.addControl(new BMap.MapTypeControl());
      this.marker = new BMap.Marker(point);
      this.map.addOverlay(this.marker);

      // 监听地图点击事件
      this.map.addEventListener('click', (e) => {
        const pt = e.point;
        this.marker.setPosition(pt);
      });
    },
    openDialog() {
      this.dialogVisible = true;
      // 需要重新绘制地图，否则可能出现显示不正常的问题
      setTimeout(() => {
        this.map && this.map.panTo(this.marker.getPosition());
      }, 200);
    },
  },
};
</script>

这个组件中，我们使用 `el-dialog` 组件包裹了一个 `div` 元素，用于显示地图。在 `mounted` 钩子函数中，我们调用 `initMap` 方法初始化地图。在弹框中显示地图时，我们需要重新绘制地图，否则可能出现显示不正常的问题。

在 `initMap` 方法中，我们创建了地图实例，并设置了中心点和缩放级别。在地图上添加了一些控件和标记，并监听了地图点击事件，在点击地图时更新标记的位置。

最后，在 `openDialog` 方法中，我们将 `dialogVisible` 设置为 `true`，以显示弹框。在弹框中显示地图时，我们通过调用 `panTo` 方法将地图移动到标记的位置。

使用这个组件时，您只需要在页面中引入它，并在需要的地方使用它即可：

<template>
  <div>
    <el-button @click="openMapDialog">打开地图</el-button>
    <baidu-map-dialog ref="mapDialog"></baidu-map-dialog>
  </div>
</template>

<script>
import BaiduMapDialog from '@/components/BaiduMapDialog';

export default {
  components: { BaiduMapDialog },
  methods: {
    openMapDialog() {
      this.$refs.mapDialog.openDialog();
    },
  },
};
</script>

在这个示例中，我们使用 `el-button` 组件来触发打开地图弹框的操作。当用户点击按钮时，我们调用 `openDialog` 方法打开弹框。同时，我们使用 `ref` 属性将地图弹框组件的引用保存在 `mapDialog` 变量中，以便在需要时调用 `openDialog` 方法。