惠州做网站的公司官网模板

我知道一个后端给的地址的经纬度要显示在地图上。但是如果我不知道zoom就不知道 应该缩放多少啊。

我们可以在map的@ready事件中获取他的zoom

<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>
      <!--标注点  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, 

BmControl, 

BmView, 

BmAutoComplete,

 BmLocalSearch, 

BmMarker, 

BmGeolocation,

BmScale } from 'vue-baidu-map'

export default {

  components: {

    BaiduMap,

    BmControl,

    BmView,

    BmAutoComplete,

    BmLocalSearch,

    BmMarker,

    BmGeolocation,

    BmScale,

  },

 data () {
      return {
        center: {lng: 0, lat: 0},
        zoom: 15,
        markers: [],
      }
    },

mounted(){
      this.markers = [{
        lng: 116.404,
        lat: 39.915,
        content:"TCL液晶产业园"
      }, {
        lng: 115.504,
        lat: 39.915,
        content:"TCL产业园"
      }]
    },
    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.markers 是我们知道的经纬度。可以有多个。全部以数组形式放在里面。
        this.zoom = view.zoom;
        this.center = view.center;
      },
      markerClick(){
        debugger
        this.show = true
      },
      infoWindowClose(){
        this.show = false
      }
    },
    destroyed() {

    },
  }