根據(jù)標(biāo)注點(diǎn)坐標(biāo)范圍計算顯示縮放級別zoom自適應(yīng)顯示地

var points = [point1, point2,point3];
var view = map.getViewport(eval(points));
var mapZoom = view.zoom; 
var centerPoint = view.center; 

vue-baidu-map使用如下；

<template>
  <div>
    <baidu-map class="bm-view"
               :center="center"
               :zoom="zoom"
               @ready="handler"
               :scroll-wheel-zoom="true"
               :mapClick="false"
               ak="**********">
      <!--地圖類型-->
      <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
      <!--地圖縮放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!--標(biāo)注點(diǎn)  animation="BMAP_ANIMATION_BOUNCE"-->
      <div v-for="marker in markers" :key="marker.lng">
        <bm-marker :position="{lng: marker.lng, lat: marker.lat}" @click="markerClick(marker)">
        </bm-marker>
        <bm-label
          :content="marker.content"
          :offset="{width:-55,height:-65}"
          :position="{lng: marker.lng, lat: marker.lat}"
          :labelStyle="{border:'1px solid #6ea4cd', padding:'8px',fontWeight: '600',fontSize:'14px',cursor: 'pointer'}"
          :title="marker.content"
          @click="markerClick(marker)"
        />
      </div>
    </baidu-map>
  </div>
</template>
<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation.vue'
  import BmMapType from 'vue-baidu-map/components/controls/MapType.vue'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker.vue'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow.vue'
  import BmOverlay from 'vue-baidu-map/components/overlays/Overlay.vue'
  import BmLabel from 'vue-baidu-map/components/overlays/Label.vue'
  import {mapGetters} from 'vuex'
  export default {
    data () {
      return {
        center: {lng: 0, lat: 0},
        zoom: 15,
        markers: [],
      }
    },
    components: {
      BaiduMap,
      BmNavigation,
      BmMapType,
      BmMarker,
      BmInfoWindow,
      BmOverlay,
      BmLabel,
    },
    computed: {
      ...mapGetters([
        'getCurrentDomainTreeCached',
      ])
    },
    mounted(){
      this.markers = [{
        lng: 116.404,
        lat: 39.915,
        content:"TCL液晶產(chǎn)業(yè)園"
      }, {
        lng: 115.504,
        lat: 39.915,
        content:"TCL產(chǎn)業(yè)園"
      }]
    },
    methods: {
      draw ({el, BMap, map}) {
//        let point = new BMap.Point(116.404, 39.915)
//        map.addOverlay(point)
        const pixel = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915))
        el.style.left = pixel.x - 60 + 'px'
        el.style.top = pixel.y - 20 + 'px'
      },


      handler ({BMap, map}) {
        // 自動獲取展示的比例
        var view = map.getViewport(eval(this.markers))
        this.zoom = view.zoom;
        this.center = view.center;
      },
      markerClick(){
        debugger
        this.show = true
      },
      infoWindowClose(){
        this.show = false
      }
    },
    destroyed() {

    },
  }
</script>

<style>
  .bm-view {
    width: 100%;
    height: calc(100vh - 100px);
  }

  .sample {
    width: 160px;
    height: 60px;
    background: rgba(255, 255, 255, 0.5);
    overflow: auto;
    color: #000000;
    text-align: center;
    padding: 10px;
    position: relative;
  }

</style>