VUE+js高德地图2.0API两幅地图联动同步缩放

<template>
  <div>
    <br>
    <div id="container"></div>
<!--    <div class="info">-->
<!--      <h4 id="text"></h4>-->
<!--      <p>当前级别：<span id="map-zoom">15</span></p>-->
<!--    </div>-->
    <div id="map" class="s1">实时地图
    </div>
    <div id="map2" class="s2">实时地图2</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: {},
      map2: {
        setZoomAndCenter(number, numbers) {
        }
      },
      zoom1: [],
      zoom2: [],
      logMapinfo: {},
      currentCenter1: [],
      currentCenter2: []

    }
  },
  mounted() {
    this.initAMap()
    this.initAMap2()
    console.log('00000000000000000', this.map.getZoom())
    console.log('1111111111', this.map.getCenter().toString())
    // this.map.on('zoomstart', this.mapZoomstart)
    // this.map.on('zoomchange', this.mapZoom)
    this.map.on('zoomend', this.mapZoomend)
    this.map.on('complete', this.mapCompleted)

    // this.map2.on('zoomstart', this.mapZoomstart2)
    // this.map2.on('zoomchange', this.mapZoom2)
    this.map2.on('zoomend', this.mapZoomend2)
    this.map2.on('complete', this.mapCompleted2)
  },
  created() {
    console.log('8777777777777')
  },
  methods: {
    initAMap() {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        // mapStyle: 'amap://styles/fresh',
        // zoom: this.mapData.zoom,//级别范围
        zoom: 14, // 级别范围
        center: [114.411943, 30.527378],
        // center: [113.201943, 23.158378],//地图中心点
        // center: this.center,
        // 隐藏默认楼块
        features: ['bg', 'road', 'point'],
        mapStyle: 'amap://styles/light',
        layers: [
          // 高德默认标准图层
          new AMap.TileLayer.Satellite(),
          new AMap.TileLayer.RoadNet(),
          // 楼块图层
          new AMap.Buildings({
            zooms: [16, 20],
            zIndex: 2,
            heightFactor: 2
          })
        ]
      })
    },
    initAMap2() {
      this.map2 = new AMap.Map('map2', {
        resizeEnable: true,
        // mapStyle: 'amap://styles/fresh',
        // zoom: this.mapData.zoom,//级别范围
        zoom: 14, // 级别范围
        center: [114.411943, 30.527378]
        // center: [113.201943, 23.158378],//地图中心点
        // center: this.center,
      })
    },
    mapZoomstart() {
      console.log('层级', this.map.getZoom())
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
      // this.map2.setZoomAndCenter(this.map.getZoom(), [120, 30])
    },
    mapZoom() {
      console.log('层级', 7777777777777777777777)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
    },
    mapZoomend() {
      console.log('层级', 8888888888888888888888)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
    },
    mapCompleted() {
      console.log('层级', 999)
      this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
      // map.setCenter([lng, lat]);
    },
    mapZoomstart2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapZoom2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapZoomend2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    },
    mapCompleted2() {
      this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
    }
  }

}

</script>
<style scoped>
  #map {
    /*top: 22px;*/
    margin: 5px;
    padding: 10px;
    width: 50%;
    height: 900px;
    /*width: 220px;*/
    /*height: 120px;*/
    background-color: #ffffff;
    border: 2px #3e94f9 solid;
    font-size: 14px;
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
  #map2 {
    left: 50%;
    margin: 5px;
    padding: 10px;
    width: 50%;
    height: 900px;
    /*width: 220px;*/
    /*height: 120px;*/
    background-color: #ffffff;
    border: 2px #3e94f9 solid;
    font-size: 14px;
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
  #info{
    color: #000;
    position: absolute;
    border-radius: 5px;
  }
</style>