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>
「其他文章」