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

好的，这是一个常见的前端开发需求。我推荐使用 Vue.js 框架和百度地图 JavaScript API 来实现。我们可以封装一个地图选择组件，组件包含一个按钮，点击按钮可以打开弹框，弹框中展示百度地图，并提供搜索和选择点位的功能。

首先，我们需要在页面中引入 Vue.js 和百度地图 JavaScript API，代码如下：

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 引入百度地图 JavaScript API -->
<script src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>

然后，我们可以创建一个地图选择组件，代码如下：

<template>
  <div>
    <button @click="openMap">选择位置</button>
    <div v-show="showMap">
      <div ref="map" style="width: 100%; height: 500px;"></div>
      <input type="text" v-model="searchKeyword" placeholder="请输入地址">
      <button @click="search">搜索</button>
      <ul>
        <li v-for="poi in pois" :key="poi.uid">
          <a href="#" @click="selectPoi(poi)">{{poi.name}}</a>
        </li>
      </ul>
      <button @click="confirm">确定</button>
      <button @click="closeMap">取消</button>
    </div>
    <div v-if="selectedPoi">
      <p>经度：{{selectedPoi.point.lng}}</p>
      <p>纬度：{{selectedPoi.point.lat}}</p>
      <p>地址：{{selectedPoi.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMap: false,
      map: null,
      searchKeyword: '',
      pois: [],
      selectedPoi: null
    }
  },
  mounted() {
    // 创建地图实例
    this.map = new BMap.Map(this.$refs.map)
    // 设置地图中心点
    this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11)
    // 启用滚轮缩放
    this.map.enableScrollWheelZoom(true)
  },
  methods: {
    openMap() {
      this.showMap = true
    },
    closeMap() {
      this.showMap = false
    },
    search() {
      const local = new BMap.LocalSearch(this.map, {
        onSearchComplete: (results) => {
          if (local.getStatus() === BMAP_STATUS_SUCCESS) {
            this.pois = results.map((result) => result.getPoi(0))
          }
        }
      })
      local.search(this.searchKeyword)
    },
    selectPoi(poi) {
      this.selectedPoi = poi
    },
    confirm() {
      this.$emit('selected', this.selectedPoi.point.lng, this.selectedPoi.point.lat, this.selectedPoi.name)
      this.showMap = false
    }
  }
}
</script>

在这个组件中，我们使用了 Vue.js 的模板语法，定义了一个按钮和一个地图弹框。地图弹框中包含了一个地图容器、一个搜索框、一个搜索按钮、一个点位列表、一个确定按钮和一个取消按钮。

在组件的 JavaScript 部分，我们定义了一些数据，如是否显示地图弹框、地图实例、搜索关键词、搜索结果和选择的点位。在组件挂载后，我们创建了一个百度地图实例，并设置了地图的中心点和缩放级别。

在组件的方法部分，我们定义了一些操作。打开地图弹框时，我们将 showMap 数据设置为 true；关闭地图弹框时，我们将 showMap 数据设置为 false。在搜索时，我们使用百度地图的 LocalSearch 类进行地址搜索，并将搜索结果存储在 pois 数组中。选择点位时，我们将选中的 poi 存储在 selectedPoi 数据中。确定操作时，我们将选中的经纬度和中文名字通过 emit 事件传递给父组件，并关闭地图弹框。

最后，我们可以在父组件中使用地图选择组件，代码如下：

<template>
  <div>
    <map-select @selected="handleSelected"></map-select>
  </div>
</template>

<script>
import MapSelect from './MapSelect.vue'

export default {
  components: {
    MapSelect
  },
  methods: {
    handleSelected(lng, lat, name) {
      alert(`经度：${lng}，纬度：${lat}，地址：${name}`)
    }
  }
}
</script>

在这个父组件中，我们引入了地图选择组件，并通过 @selected 监听其选中事件。当选中事件触发时，我们弹出一个提示框，展示选中的经纬度和中文名字。

这样，我们就完成了一个基于 Vue.js 和百度地图的地图选择组件。