vue中使用百度地图（以当前位置为地图中心）

1、第一步
　　npm install vue-baidu-map --save
2、第二步

　　import { BaiduMap } from "vue-baidu-map";

 　　 components: {

   　　 BaiduMap

 　　 },

3、第三步

　　  <baidu-map

     　　 style=" width:100%;height:100%;float:left"

      　　:center="center"

     　　 :zoom="zoom"

     　　 class="baidu-map-view"

    　　  :scroll-wheel-zoom="true"

      　　ak="你的密钥"

  　　  ></baidu-map>

4、设置当前位置为中心点（完整代码）

<!--
 * @Author: HuiMinQi
 * @Date: 2024-02-23 11:36:09
 * @LastEditors: HuiMinQi
 * @LastEditTime: 2024-02-27 17:08:00
 * @Description: 使用百度地图
-->
<template>
  <div class="container">
    <baidu-map
      style=" width:100%;height:100%;float:left"
      :center="center"
      :zoom="zoom"
      class="baidu-map-view"
      :scroll-wheel-zoom="true"
      ak="2njVrnETjCjHtTXi1hOLwlicTUCpEipe"
      @ready="map_handler"
    ></baidu-map>
  </div>
</template>
<script>
import { BaiduMap } from "vue-baidu-map";

export default {
  props: {},
  components: {
    BaiduMap
  },
  data() {
    return {
      center: {
        lng: 116.404,
        lat: 39.915
      },
      zoom: 20,
      BMap: {},
      map: {}
    };
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    //地图显示的回调
    map_handler({ BMap, map }) {
      this.BMap = BMap;
      this.map = map;
      let _this = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(
        function(r) {
          _this.center = {
            lng: r.point.lng,
            lat: r.point.lat
          };
        },
        { enableHighAccracy: true }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
</style>