百度地图添加叠加层

百度地图添加叠加层

npm install vue-baidu-map --save

<template>
<!-- center:地图的中心 zoom：地图的层级 @ready：地图的初始化事件 :scroll-wheel-zoom：是否支持鼠标缩放-->
    <baidu-map class="map" 
    :center="center" 
    :zoom="zoom" 
    :scroll-wheel-zoom="true"  
    @ready='initMap' 
    ak="填写自己申请的这个ak码"></baidu-map>
</template>

<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components:{
  BaiduMap
},
data(){
  return{
  groundOverlay:{},
    center:{//经纬度
      lng:0,
      lat:0,
    },
    zoom:3,//地图展示级别
    BMap:null,//百度地图对象
    map:null,//百度地图实例
  }
},
methods:{
  initMap({BMap,map}){
    this.BMap = BMap
    this.map = map
    this.center.lng = 116.404;
    this.center.lat = 39.915;
    this.zoom = 10
    this.addGround()
  },
      // 添加地图叠加层
    addGround() {
      let map = this.map;
      let BMap = this.BMap;
      let TianAnMen = new BMap.Point(116.404449, 39.914889);
      // 居中放大
      map.centerAndZoom(TianAnMen, 12);
      // 启用滚轮放大缩小
      map.enableScrollWheelZoom();
      // 西南角和东北角
      var SW = new BMap.Point(73.40, 3.52);
      var NE = new BMap.Point(135.2, 53.33);
      let groundOverlayOptions = {
        opacity: .5,
        // displayOnMinLevel: 10,
        // displayOnMaxLevel: 14,
      };
      // 初始化GroundOverlay
      this.groundOverlay = new BMap.GroundOverlay(
        new BMap.Bounds(SW, NE),
        groundOverlayOptions
      );

      this.groundOverlay.setImageURL('图片地址');
      this.addGroundOverlay();
    },
     addGroundOverlay() {
      // 添加GroundOverlay
      this.map.addOverlay(this.groundOverlay);
    },
    removeGroundOverlay() {
      // 移除GroundOverlay
      this.map.removeOverlay(this.groundOverlay);
    },
},
}
</script>

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