在vue2的 弹框中封装一个地图组件，可以搜索打点，并且返回经纬度，跟具体位置

在Vue2中，封装一个地图组件并集成搜索功能通常会涉及到第三方地图API，比如高德地图(Amap)或百度地图(Baidu Map)，因为Vue本身并不提供地图相关的内置功能。

首先，你需要安装地图API库，例如`amap-vue`（用于高德地图）或`element-maps`（基于Element UI的百度地图封装）。假设我们使用`amap-vue`为例：

1. 安装依赖：

npm install amap-vue@latest vue@^2.x

2. 创建地图组件：

<template>
  <div class="map-container">
    <AMap :zoom="zoom" :center="center" @ready="mapReady">
      <!-- 添加标记点和搜索组件 -->
      <AMap.Marker :position="{lng: lat, lat: lng}" @click="handleMarkerClick"></AMap.Marker>
      <AMap.Search placeholder="请输入地址" v-model="searchText" @search="handleSearchResult"></AMap.Search>
    </AMap>
  </div>
</template>

<script>
import AMap from 'amap-vue';

export default {
  components: {
    AMap,
  },
  data() {
    return {
      zoom: 15,
      center: { lat: 0, lng: 0 }, // 初始地理位置
      searchText: '',
      currentLocation: {}, // 存储当前选中的地点信息
    };
  },
  methods: {
    mapReady() {
      this.map = this.$refs.map; // 获取地图实例
    },
    handleMarkerClick(e) {
      this.currentLocation = e.target.getPosition(); // 获取点击标记的经纬度
    },
    handleSearchResult(result) {
      if (result.infoCity) {
        this.center = result.result.regeocode.formattedAddress;
        const location = result.result.geometry.location; // 经纬度数据
        this.currentLocation = { lat: location.lng, lng: location.lat };
      }
    },
  },
};
</script>

在这个例子中，用户可以在搜索框输入地址或点击地图上的标记获取经纬度，然后将这些信息存储在`currentLocation`中。你可以根据需要调整样式和其他交互细节。