vue调用百度地图

引用

npm install vue-baidu-map --save

然后在main里面引入

// 引入百度的api
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
  ak: "RME3rz3a......"  //  在此输入你自己的百度地图ak
})

dom小案列

在页面当中使用

<template>
    <div>
        <baidu-map class='map' :center='map.center' :zoom="map.zoom" @ready="handler">
            <!--缩放-->
            <bm-navigation anchor='BMAP_ANCHOR_TOP_LEFT'></bm-navigation>
            <!--定位-->
            <bm-geolocation anchor='BMAP_ANCHOR_BOTTOM_RIGHT' :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <!--点-->
            <bm-marker :position="map.center" :dragging="map.dragging" animation='BMAP_ANIMATION_DROP'>
                <!--提示信息-->
                <bm-info-window :show="map.show">请点击</bm-info-window>
            </bm-marker>
        </baidu-map>
    </div>
</template>
<script>
    export default {
        name: 'demo',
        data: () => ({
            map:{
                center: {lng: 121.4472540000, lat: 31.3236200000},
                zoom: 15,
                show: true,
                dragging: true
            },
        }),
        methods: {
            handler ({BMap, map}) {
                let me = this;
                console.log(BMap, map)
                // 鼠标缩放
                map.enableScrollWheelZoom(true);
                // 点击事件获取经纬度
                map.addEventListener('click', function (e) {
                    console.log(e.point.lng, e.point.lat)
                })
            }
        }
    }
</script>
 
<style scoped>
    .map {
        width: 100%;
        height: 400px;
    }
</style>

进入显示当前位置

<template>
  <div class="main">
    <input placeholder="" v-model.number="center.lng" />
    <input v-model.number="center.lat" />
    <input v-model.number="zoom" />
    <baidu-map
      @click="getClickInfo"
      class="bm-view"
      :center="center"
      :zoom="15"
      @ready="handler"
      :scroll-wheel-zoom="true"
    >
      <bm-panorama></bm-panorama>
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <bm-geolocation
        anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
        :showAddressBar="true"
        :autoLocation="true"
      ></bm-geolocation>
      <bm-marker
        :position="center"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      />
    </baidu-map>
  </div>
</template>
<script>
export default {
  data() {
    return {
      zoom: 5,
      address: null,
      center: { lng: 0, lat: 0 }, //这个经纬度
    };
  },
  methods: {
    //ready方法可以在百度地图开始加载时执行，可以用来获取位置信息
    handler({ BMap, map }) {
      let that = this;
      var geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (res) {
        that.currentLocation = [res.longitude, res.latitude];
        console.log("当前位置经纬度", that.currentLocation);
        that.center.lng = that.currentLocation[0];
        that.center.lat = that.currentLocation[1];
      });
    },
    getClickInfo(e) {
      // 创建地理编码实例
      const myGeo = new BMap.Geocoder();
      // 根据坐标逆解析地址
      myGeo.getLocation(new BMap.Point(e.point.lng, e.point.lat), (result) => {
        console.log(result, "result-->>>>");
        if (result) {
          this.address = result.address;
        }
      });
      this.center.lng = e.point.lng;
      this.center.lat = e.point.lat;
      console.log(this.center.lng, "result-->>>>");
      console.log(this.center.lat, "result-->>>>");
    },
  },
  mounted() {},
};
</script>
<style>
.bm-view {
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
  height: 600px;
}
</style>

更多详情可以去官网查看

https://dafrok.github.io/vue-baidu-map/#/zh/index

参考案列

使用vue-baidu-map如何获取当前位置经纬度

<template>
  <!-- 该百度地图容器不展示，仅用于获取当前位置 
    使用@ready事件来进行写
-->
<baidu-map id="map" class="map" :scroll-wheel-zoom="true" :pinch-to-zoom="true" ak="a65Kt6....." @ready="handler">
</baidu-map>
</template>
<script>
export default {
data(){
    return{}
},
methods:{
    // 获取当前位置位置
handler({ BMap, map }) {
  let that = this
  var geolocation = new BMap.Geolocation();
  geolocation.getCurrentPosition(function (res) {
    that.currentLocation = [res.longitude, res.latitude]
    console.log("当前位置经纬度",that.currentLocation)
  });
},

}
}
</script>

<style>

</style>