百度地圖添加疊加層
npm install vue-baidu-map --save
<template>
<!-- center:地圖的中心 zoom：地圖的層級(jí) @ready：地圖的初始化事件 :scroll-wheel-zoom：是否支持鼠標(biāo)縮放-->
<baidu-map class="map"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="true"
@ready='initMap'
ak="填寫自己申請(qǐng)的這個(gè)ak碼"></baidu-map>
</template>
<script>
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
components:{
BaiduMap
},
data(){
return{
groundOverlay:{},
center:{//經(jīng)緯度
lng:0,
lat:0,
},
zoom:3,//地圖展示級(jí)別
BMap:null,//百度地圖對(duì)象
map:null,//百度地圖實(shí)例
}
},
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>
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-552728.html
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-552728.html
到了這里，關(guān)于百度地圖添加疊加層的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
