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

标签：baidu map vue 100% 地图 zoom BMap 百度

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>

 

   

标签：baidu,map,vue,100%,地图,zoom,BMap,百度
From： https://www.cnblogs.com/qhm-1440/p/18037304