百度地图添加叠加层
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>
文章来源地址https://www.toymoban.com/news/detail-552728.html
文章来源:https://www.toymoban.com/news/detail-552728.html
到了这里,关于百度地图添加叠加层的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!