百度地圖 建立 自定義控件（vue）

1.組件代碼

Bmap.vue

<!-- 離線地圖 組件 -->
<template>
  <div id="map" :style="style"></div>
</template>

<script>
export default{
  data(){
    return {
      style:{
        width:'100%',
        height:this.height + 'px'
      }
    }
  },
  props:{
    height:{
      type:Number,
      default:736  // 默認值
    },
    longitude:{
      type:Number,
      default:114.00100
    },  // 經度
    latitude:{
      type:Number,
      default:22.61067
    } // 維度
  },
  mounted(){
    let _this = this;
    /**
     * 百度地圖API功能
     */
    let map = new BMap.Map("map",{minZoom:12,maxZoom:18});
    let point = new BMap.Point(this.longitude,this.latitude);
    map.centerAndZoom(point,13);

    // 定義一個控件類,即function
    function MessageControl(){
      // 默認停靠位置和偏移量
      this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
      this.defaultOffset = new BMap.Size(10, 10);
    }

    // 經過JavaScript的prototype屬性繼承於BMap.Control
    MessageControl.prototype = new BMap.Control();

    // 自定義控件必須實現本身的initialize方法,而且將控件的DOM元素返回
    // 在本方法中建立個div元素做爲控件的容器,並將其添加到地圖容器中
    MessageControl.prototype.initialize = function(map){
      // 建立一個DOM元素
      let div = document.createElement("div");
      // 設置樣式
      div.style.height = "50px";
      div.style.width = "50px";
      div.style.backgroundImage = "url('./static/img/message_map.png')";
      div.style.backgroundSize = "cover";
      // 綁定事件,點擊一次放大兩級
      div.onclick = function(e) {
        // 將輸入值傳遞給父組件
        _this.$emit("showSideBar",true);
      }
      // 添加DOM元素到地圖中
      map.getContainer().appendChild(div);
      // 將DOM元素返回
      return div;
    }

    // 建立控件
    let messageCtrl = new MessageControl();

    // 添加到地圖當中
    map.addControl(messageCtrl);
  }
}
</script>

2.效果圖