请你扮演一个资深前端，用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" title="选择地点" width="800px">
    <div class="map-container">
      <div ref="mapContainer" class="map"></div>
      <div class="search-container">
        <el-input placeholder="请输入地址关键字" v-model="searchText"></el-input>
        <el-button type="primary" @click="search">搜索</el-button>
        <el-button @click="clear">清除</el-button>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

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

      // 初始化地图，设置中心点和缩放级别
      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);
      });
    },
    initSearch() {
      // 创建本地搜索实例
      this.localSearch = new BMap.LocalSearch(this.map, {
        onSearchComplete: (results) => {
          // 处理搜索结果
          this.searchResults = results ? results.getCurrentNumPois() : [];
          if (this.searchResults.length > 0) {
            const firstResult = this.searchResults[0];
            const pt = new BMap.Point(firstResult.point.lng, firstResult.point.lat);
            this.map.panTo(pt);
            this.marker.setPosition(pt);
          }
        },
        onMarkersSet: (markers) => {
          // 隐藏搜索结果的标记
          for (let i = 0; i < markers.length; i++) {
            markers[i].hide();
          }
        },
      });
    },
    openDialog() {
      this.dialogVisible = true;
      // 需要重新绘制地图，否则可能出现显示不正常的问题
      setTimeout(() => {
        this.map && this.map.panTo(this.marker.getPosition());
      }, 200);
    },
    search() {
      if (this.searchText) {
        this.localSearch.search(this.searchText);
      }
    },
    clear() {
      this.searchText = '';
      this.searchResults = [];
      this.localSearch.clearResults();
    },
    confirm() {
      const position = this.marker.getPosition();
      const location = { lng: position.lng, lat: position.lat };
      this.$emit('selected', location);
      this.dialogVisible = false;
    },
  },
};
</script>

<style>
.map-container {
  display: flex;
  flex-direction: column;
  height: 500px;
}

.map {
  flex: 1;
  height: 0;
  overflow: hidden;
}

.search-container {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
</style>

这个组件中，我们使用 `el-dialog` 组件包裹了一个 `div` 元素，用于显示地图和搜索框。我们还在弹框中添加了一个“确定”按钮和一个“取消”按钮，以便用户选择地点后进行确认。

在 `mounted` 钩子函数中，我们调用 `initMap` 方法初始化地图，并调用 `initSearch` 方法初始化本地搜索实例。在弹框中显示地图时，我们需要重新绘制地图，否则可能出现显示不正常的问题。

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

在 `initSearch` 方法中，我们创建了本地搜索实例，并设置了搜索完成和标记设置完成的回调函数。在搜索完成时，我们将搜索结果保存在 `searchResults` 数组中，并将地图移动到第一个搜索结果的位置，并更新标记的位置。在标记设置完成时，我们隐藏搜索结果的标记。

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

在 `search` 方法中，我们使用本地搜索实例进行搜索，并在搜索完成时更新搜索结果。

在 `clear` 方法中，我们清除搜索框中的文本和搜索结果，并清除本地搜索实例的结果。

在 `confirm` 方法中，我们将选择的地点的经纬度保存在 `location` 对象中，并通过 `$emit` 方法触发 `selected` 事件，将其传递给父组件。最后，我们将 `dialogVisible` 设置为 `false`，以关闭弹框。

最后，您可以在需要的地方使用这个组件，并监听 `selected` 事件，以获取用户选择的地点的经纬度：

<template>
  <div>
    <el-button @click="openMapDialog">选择地点</el-button>
    <baidu-map-dialog @selected="onSelected"></baidu-map-dialog>
  </div>
</template>

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

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

在这个示例中，我们使用 `el-button` 组件来触发打开地图弹框的操作。当用户选择完地点后，我们监听 `selected` 事件，并在事件处理函数中获取用户选择的地点的经纬度。