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

原创

已于 2022-03-17 18:23:01 修改 · 1.7k 阅读

标签

#javascript #vue.js #前端

收录于

于 2022-03-17 18:21:22 首次发布

该博客展示了如何在Vue.js应用中使用高德地图API创建两幅地图，并实现地图之间的缩放操作同步。通过监听地图的zoomstart, zoomchange, zoomend事件，实现在一幅地图缩放时，另一幅地图自动调整到相同的缩放级别和中心点。" 43603259,3244151,CUDA线程索引与计算,"['CUDA编程', '线程模型', 'GPU计算', '库接口']

<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.