场景: 1. 前端项目,自适应一个16:9的大屏.根据屏幕尺寸,调用resize方法自动放大缩小UI.
2. 需求说要加个百度地图, 使用了vue-baidu-map包, 写了demo地图很清晰.
3. 把百度地图嵌入前端项目, 屏蔽resize方法,地图清晰. 调用resize方法,,地图糊了.
问题: 怎样让我既可以根据屏幕尺寸做到自适应, 又能让百度地图不糊.. ..
相关代码:
1. 自适应屏幕分辨率代码: index.vue
<!--
布局
-->
<template>
<div class="main-container" :style="classObj">
<router-view/>
</div>
</template>
<script>
import HeaderView from '@/layout/header-view'
const MAX_WIDTH = 1920
export default {
name: 'Layout',
components: { HeaderView },
data() {
return {
classObj: { transform: 'scale(1)' },
}
},
mounted() {
this.resizeView()
window.addEventListener( 'resize', this.resizeView )
},
destroyed() {
window.removeEventListener( 'resize', this.resizeView )
},
methods: {
resizeView() {
//这段代码屏蔽掉以后,百度地图就不糊了,标注的字体很清晰, 打开这段代码,地图文字会很模糊.
/*const bodyWidth = document.documentElement.clientWidth
const scaleRate = bodyWidth / MAX_WIDTH
this.classObj = {
transform: `scale(${ scaleRate })`
}*/
},
}
}
</script>
<style lang="scss" scoped></style>
2. 地图代码 map.vue
<template>
<div>
<baidu-map :center="center"
:zoom="centerAndZoom"
@ready="handler"
style="padding:20px;height:800px;"
@click="getClickInfo"
:scroll-wheel-zoom='true'>
</baidu-map>
</div>
</template>
<script>
// import overIcon from './company.png'
export default {
data() {
return {
showMap: false,
center: { lng: 113.577435, lat: 23.11596 },
centerAndZoom: 18,
BMap: null,
map: null,
windowList: []
}
},
methods: {
//BMap是百度地图的对象，直接new出来跟原始的百度地图API一样使用，
//map是地图对象，可以调用对应的地图方法，比如添加marker
handler( { BMap, map } ) {
this.BMap = BMap
this.map = map
this.init()
this.getDataList() //添加覆盖物,轮播
},
init() {
var mapStyle = { style: "dark" }
this.map.setMapStyle( mapStyle )
this.map.enableScrollWheelZoom()// 添加鼠标滚动缩放
this.map.addControl( new BMap.OverviewMapControl( { isOpen: false, anchor: BMAP_ANCHOR_BOTTOM_RIGHT } ) )// 添加缩略图控件
this.map.addControl( new BMap.NavigationControl() )// 添加缩放平移控件
this.map.addControl( new BMap.ScaleControl() )//添加比例尺控件
this.map.addControl( new BMap.MapTypeControl() )//添加地图类型控件
//this.map.enableResizeOnCenter() //开启图区resize中心点不变
var point = new BMap.Point( this.center.lng, this.center.lat )
this.map.centerAndZoom( point, this.centerAndZoom )
/*var circle = new BMap.Circle( point, 10, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' } )
this.map.addOverlay( circle )*/
},
getClickInfo( e ) {
/*console.log( e.point.lng )
console.log( e.point.lat )
this.center.lng = e.point.lng
this.center.lat = e.point.lat*/
},
getDataList() {
this.map.clearOverlays()
let _this = this
let points = []
this.copycat.mapInfo().then( res => {
res.data.forEach( ( item, index ) => {
var pointer = new BMap.Point( item.longitude, item.latitude )
points.push( pointer )
let label = new BMap.Label( item.name, { offset: new BMap.Size( 25, 5 ) } )
label.setStyle( { fontSize: "24px" } )
let markers = new BMap.Marker( pointer )
this.map.addOverlay( markers ) // 将标注添加到地图中
markers.setLabel( label ) // 将data中的name添加到地图中
/*var circle = new BMap.Circle( pointer, 30, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' } )
this.map.addOverlay( circle )*/
// 标注的点击事件
let infoWindow = new BMap.InfoWindow( 'aaaaaaaaaaaaa', {
width: 150, // 信息窗口宽度
height: 200, // 信息窗口高度
title: '<h4>' + item.name + '</h4>', // 信息窗口标题 // 信息窗口标题
} )
const content = item.info.map( itm => {
return itm.title + itm.value + itm.cell
} ).join( '<br/>' )
infoWindow.setContent( content )
this.windowList.push( { infoWindow: infoWindow, pointer: pointer } )
} )
this.scrollInfoWindow()
} )
this.map.setViewport( points )
},
scrollInfoWindow() { //轮播infoWindow
let index = 0
setInterval( () => {
const data = this.windowList[index]
this.openInfoWindow( data.infoWindow, data.pointer )
this.map.panTo( data.pointer)
// this.map.flyTo( data.pointer,this.centerAndZoom)
index++;
index = index % 3
}, 5000 )
},
openInfoWindow( infoWindow, pointer ) {
this.map.openInfoWindow( infoWindow, pointer )//参数：窗口、点 根据点击的点出现对应的窗口
},
}
}
</script>
<style scoped lang="scss">
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
.bm-view {
width: 100%;
height: 800px;
}
/deep/ .BMap_mask {
/*地图标题*/
.BMap_bubble_title {
color: white;
font-size: 13px;
font-weight: bold;
text-align: left;
padding-left: 5px;
padding-top: 5px;
border-bottom: 1px solid gray;
background-color: #0066b3;
}
/* 消息内容 */
.BMap_bubble_content {
background-color: mediumvioletred;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 10px;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
top: 35px !important;
border-radius: 7px;
}
/* 左上角删除按键 */
.BMap_pop img {
top: 43px !important;
left: 215px !important;
}
.BMap_top {
display: none;
}
.BMap_bottom {
display: none;
}
.BMap_center {
display: none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
display: none;
}
.BMap_pop div:nth-child(3) {
display: none;
}
.BMap_pop div:nth-child(7) {
display: none;
}
}
</style>
