zmttpassion
十里冰香
2021-04-14 14:52
采纳率: 100%
浏览 79

前端自适应屏幕大小,resize以后,百度地图糊了.

场景: 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>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • xw245184020
    少十步 2021-04-15 16:16
    已采纳

    你页面resize时 百度地图这个对象也要重新reload https://dafrok.github.io/vue-baidu-map/#/zh/start/base

    点赞 1 评论

相关推荐