请你扮演一个高级前端，用百度地图+vue2写一个地图选点并且可搜索地点选择的功能，写一个完整案例

好的，下面我来演示一下如何用百度地图和Vue2来实现地图选点并且可搜索地点选择的功能。

首先，我们需要引入百度地图的API，可以在`index.html`中添加以下代码：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的百度地图AK"></script>

其中，`ak`是你在百度地图开放平台申请的API Key。

接下来，我们需要在Vue组件中渲染地图，并实现地图选点的功能。我们可以将地图封装成一个单独的组件`BaiduMap`，代码如下：

<template>
  <div class="map-container">
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'BaiduMap',
  data() {
    return {
      map: null,
      marker: null,
      search: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();

    // 监听地图点击事件
    this.map.addEventListener('click', this.handleMapClick);
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map(this.$refs.map);

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

      // 添加比例尺控件
      const scaleControl = new BMap.ScaleControl();
      this.map.addControl(scaleControl);

      // 添加缩略图控件
      const overviewControl = new BMap.OverviewMapControl();
      this.map.addControl(overviewControl);

      // 添加定位控件
      const geolocationControl = new BMap.GeolocationControl();
      this.map.addControl(geolocationControl);

      // 添加标注
      this.marker = new BMap.Marker(point);
      this.map.addOverlay(this.marker);

      // 初始化搜索框
      this.search = new BMap.Autocomplete({
        input: 'search-input',
        location: this.map,
      });
    },
    handleMapClick(e) {
      // 切换标注位置
      this.marker.setPosition(e.point);
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 300px;
}

.map {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
</style>

这个组件中，我们使用了百度地图提供的`BMap`对象来创建地图实例，添加控件和标注，并监听地图点击事件来实现地图选点功能。

接下来，我们需要在组件中添加一个搜索框，可以通过搜索地点来选择标注的位置。我们可以在`template`中添加以下代码：

<template>
  <div class="map-container">
    <input id="search-input" type="text" placeholder="请输入关键字进行搜索" />
    <div ref="map" class="map"></div>
  </div>
</template>

然后，在`mounted`钩子中初始化搜索框，并监听搜索结果选中事件，代码如下：

mounted() {
  // 初始化地图
  this.initMap();

  // 监听地图点击事件
  this.map.addEventListener('click', this.handleMapClick);

  // 监听搜索结果选中事件
  this.search.addEventListener('onconfirm', this.handleSearchSelect);
},
methods: {
  // ...
  handleSearchSelect(result) {
    // 将搜索结果定位到地图上
    const point = result.point;
    this.map.centerAndZoom(point, 15);
    this.marker.setPosition(point);
  },
}

至此，我们已经完成了地图选点并且可搜索地点选择的功能。完整代码如下：

<template>
  <div class="map-container">
    <input id="search-input" type="text" placeholder="请输入关键字进行搜索" />
    <div ref="map" class="map"></div>
  </div>
</template>

<script>
export default {
  name: 'BaiduMap',
  data() {
    return {
      map: null,
      marker: null,
      search: null,
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();

    // 监听地图点击事件
    this.map.addEventListener('click', this.handleMapClick);

    // 监听搜索结果选中事件
    this.search.addEventListener('onconfirm', this.handleSearchSelect);
  },
  methods: {
    initMap() {
      // 创建地图实例
      this.map = new BMap.Map(this.$refs.map);

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

      // 添加比例尺控件
      const scaleControl = new BMap.ScaleControl();
      this.map.addControl(scaleControl);

      // 添加缩略图控件
      const overviewControl = new BMap.OverviewMapControl();
      this.map.addControl(overviewControl);

      // 添加定位控件
      const geolocationControl = new BMap.GeolocationControl();
      this.map.addControl(geolocationControl);

      // 添加标注
      this.marker = new BMap.Marker(point);
      this.map.addOverlay(this.marker);

      // 初始化搜索框
      this.search = new BMap.Autocomplete({
        input: 'search-input',
        location: this.map,
      });
    },
    handleMapClick(e) {
      // 切换标注位置
      this.marker.setPosition(e.point);
    },
    handleSearchSelect(result) {
      // 将搜索结果定位到地图上
      const point = result.point;
      this.map.centerAndZoom(point, 15);
      this.marker.setPosition(point);
    },
  },
};
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 300px;
}

.map {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}
</style>

希望这个示例能够帮助你实现类似的功能。