VUE 中嵌入 百度地圖

開源軟體供應鏈點亮計劃，等你來！>>>

首先在 百度官網申請 AK 申請地址

下載 百度地圖元件庫

npm install vue-baidu-map --save

在 main.js 中引入相關元件

import BmScale from 'vue-baidu-map/components/controls/Scale'
import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
import BmMarkerClusterer from 'vue-baidu-map/components/extra/MarkerClusterer'
import BmMarker from 'vue-baidu-map/components/overlays/Marker'
import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'

Vue.use(BmScale)
Vue.use(BmNavigation)
Vue.use(BmMarkerClusterer)
Vue.use(BmMarker)
Vue.use(BmInfoWindow)

在main.js中註冊使用地圖的 AK 資訊

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
  /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
  ak: '1wOvY5htfcLPFju1gNFIoRqa5LF20tGP'
})

完成上面的準備步驟就可以開始 進行地圖的展示與開發工作了，下面是我的示例程式碼

<template>
  <div class="right-context" id="right-context">
    <baidu-map
      :style="{ width: map.width, height: map.height }"
      class="map"
      ak="你的百度地圖祕鑰"
      :zoom="map.zoom"
      :center="{ lng: map.center.lng, lat: map.center.lat }"
      @ready="handler"
      :scroll-wheel-zoom="true"
    >
      <!--比例尺控制元件-->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!--縮放控制元件-->
      <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>
      <!--聚合動態新增的點座標-->
      <bm-marker-clusterer :averageCenter="true">
        <bm-marker
          v-for="marker of markers"
          :key="marker.code"
          :position="{ lng: marker.lng, lat: marker.lat }"
          @click="lookDetail(marker)"
        ></bm-marker>
      </bm-marker-clusterer>
      <!--資訊窗體-->
      <bm-info-window
        :position="{ lng: infoWindow.info.lng, lat: infoWindow.info.lat }"
        :title="infoWindow.info.name"
        :show="infoWindow.show"
        @close="windowClose"
        @open="windowOpen"
      >
        <p>
          <span class="left">單位面積能耗：</span
          ><span class="right">{{ infoWindow.info.areaEnergy }}kWh/㎡</span>
        </p>
        <p>
          <span class="left">建築面積：</span
          ><span class="right">{{ infoWindow.info.area }}㎡</span>
        </p>
        <p>
          <span class="left">電耗：</span
          ><span class="right">{{ infoWindow.info.energy }}kWh</span>
        </p>
        <p>
          <span class="left">水耗：</span
          ><span class="right">{{ infoWindow.info.water }}m³</span>
        </p>
        <p>
          <span class="left">氣耗：</span
          ><span class="right">{{ infoWindow.info.air }}m³</span>
        </p>
      </bm-info-window>
    </baidu-map>
  </div>
</template>

<script>
//百度地圖

export default {
  name: "pm-distribution",
  data() {
    return {
      buildId: "", //專案ID
      searchParams: {
        regions: 0, //區域編號
        proType: 0, //專案型別
        proCode: "", //專案編號
      },
      map: {
        center: { lng: 114.31667, lat: 30.51667 }, //'南京市',
        zoom: 12,
        width: "1920px",
        height: "880px",
      },
      markers: [{ code: 10010, lng: 114.31667, lat: 30.51667 }],
      infoWindow: {
        lng: 0,
        lat: 0,
        show: false,
        info: {
          air: 0,
          area: 12313,
          areaEnergy: 0.64,
          code: "440300A055",
          energy: 7922.66,
          lat: "32.043433",
          lng: "118.784107",
          name: "市人民檢察院",
          water: 0,
        },
      },
      activeName: "",
      leftHeight: "540px",
      containerHeight: "700px",
    };
  },
  mounted() {},
  methods: {
    handler() {},
    lookDetail(data) {
      console.log(123);
      this.infoWindow.show = true;
      this.infoWindow.info = data;
      // let This=this;
      //為彈視窗標題新增title
      this.$nextTick(() => {
        var win = document.querySelector(".BMap_bubble_title");
        win.title = this.activeName;
      });
    },
    windowClose() {
      this.infoWindow.show = false;
    },
    windowOpen() {
      this.infoWindow.show = true;
    },
  },
};
</script>

<style lang="less" scoped>
.right-context {
  width: 1920px;
  height: 800px;
}
// 這裡是為了去掉 百度的圖示
/deep/ .BMap_cpyCtrl {
  position: static !important;
  display: none !important;
}
/deep/ .anchorBL {
  position: static !important;
  display: none !important;
}
</style>

參考地址-其一

參考地址-其二