请你扮演一个高级前端，用vue+百度地图实现一个地图选点的功能，写一个实例

好的，下面是一个使用Vue和百度地图API实现地图选点功能的示例：

首先，您需要在Vue项目中安装百度地图API。您可以通过在项目中引入百度地图API的JS文件来实现这一点，或者使用npm安装`vue-baidu-map`等相关插件。

npm install vue-baidu-map --save

然后，您需要在Vue组件中添加地图容器和相关的控件。您可以使用百度地图API提供的`BMap.Map`类创建地图对象，并将其添加到组件中。您还可以通过`BMap.NavigationControl`、`BMap.ScaleControl`等控件类来添加相应的导航控件和比例尺控件。

<template>
  <div>
    <div id="map" style="width: 100%; height: 400px;"></div>
    <button @click="showMap">选择位置</button>
  </div>
</template>

import BMap from 'vue-baidu-map';

export default {
  name: 'Map',
  data() {
    return {
      showMap: false,
      map: null,
      point: null,
    };
  },
  components: {
    BMap,
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map');
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      this.map.enableScrollWheelZoom(true);
      this.map.addControl(new BMap.NavigationControl());
      this.map.addControl(new BMap.ScaleControl());
      this.map.addEventListener('click', (e) => {
        this.point = e.point;
        this.showMap = false;
      });
    },
    showMap() {
      this.showMap = true;
      this.$nextTick(() => {
        if (!this.map) {
          this.initMap();
        } else {
          this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
        }
      });
    },
  },
};

在这个示例中，我们使用了`vue-baidu-map`插件来引入百度地图API。在`initMap`方法中，我们创建了一个地图对象，并添加了导航控件和比例尺控件。在`showMap`方法中，我们显示了地图容器，并在用户点击地图时保存选中的点的坐标。

最后，在Vue组件中添加一个按钮或其他交互元素，让用户触发地图选点功能。当用户点击该元素时，您可以显示地图容器，让用户选择地图上的点，并将所选点的坐标保存到组件数据中。

<template>
  <div>
    <div id="map" style="width: 100%; height: 400px;" v-show="showMap"></div>
    <button @click="showMap = true">选择位置</button>
    <div v-if="point">{{ point.lng }}, {{ point.lat }}</div>
  </div>
</template>

import BMap from 'vue-baidu-map';

export default {
  name: 'Map',
  data() {
    return {
      showMap: false,
      map: null,
      point: null,
    };
  },
  components: {
    BMap,
  },
  methods: {
    initMap() {
      this.map = new BMap.Map('map');
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
      this.map.enableScrollWheelZoom(true);
      this.map.addControl(new BMap.NavigationControl());
      this.map.addControl(new BMap.ScaleControl());
      this.map.addEventListener('click', (e) => {
        this.point = e.point;
        this.showMap = false;
      });
    },
  },
};

在这个示例中，我们在Vue组件中添加了一个显示所选点坐标的元素。当用户点击选择位置按钮时，我们显示地图容器，并在用户点击地图时保存选中的点坐标并隐藏地图容器。