vue百度地图打点 点击当前定位百度地图获取位置信息

首先需要在Vue项目中引入百度地图JavaScript API。

1. 在`index.html`文件中添加百度地图JavaScript API的引用：

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

其中，`AK`是你在百度地图开发者中心中申请的密钥。

2. 在Vue组件中添加地图容器和定位按钮：

<template>
  <div>
    <!-- 地图容器 -->
    <div id="map"></div>
    <!-- 定位按钮 -->
    <button @click="getLocation">定位</button>
  </div>
</template>

3. 在Vue组件的`<script>`标签中编写JavaScript代码：

export default {
  data() {
    return {
      // 地图对象
      map: null,
      // 定位标记
      marker: null,
      // 定位信息
      location: null
    };
  },
  methods: {
    // 初始化地图
    initMap() {
      const map = new BMap.Map('map');
      map.centerAndZoom(new BMap.Point(116.404, 39.915), 18);
      this.map = map;
    },
    // 获取当前位置信息
    getLocation() {
      const geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        position => {
          this.location = position;
          this.showLocation();
        },
        { enableHighAccuracy: true }
      );
    },
    // 在地图上显示位置信息
    showLocation() {
      const { point, address } = this.location;
      if (!this.marker) {
        const marker = new BMap.Marker(point);
        this.map.addOverlay(marker);
        this.marker = marker;
      } else {
        this.marker.setPosition(point);
      }
      this.map.panTo(point);
      alert(`当前位置：${address}`);
    }
  },
  mounted() {
    this.initMap();
  }
};

在上述代码中，我们首先定义了`map`、`marker`和`location`三个变量，分别表示地图对象、定位标记和位置信息。在`initMap`方法中，我们创建了一个地图对象并将其初始化。在`getLocation`方法中，我们通过`BMap.Geolocation`获取当前位置信息，并将其保存在`location`变量中。然后我们调用`showLocation`方法，在地图上显示定位标记，并弹窗显示当前位置信息。