vue-amap center和zoom

center:Array 地图中心点坐标值
zoom:地图缩放
PC上,默认范围[3,18],取值范围[3-18];
在移动设备上,默认范围[3-19],取值范围[3-19]

<template>
  <div class="amap-page-container">
    <el-amap vid="amapDemo"
             :zoom="zoom"
             :center="center"
             :amap-manager="amapManager"
             :events="mapEvents"
             class="amap-demo">
      <el-amap-marker vid="component-marker"
                      v-for="(marker, index) in markers"
                      :key="index"
                      :position="marker.position"
                      :content="marker.icon">
        <!-- :offset="[-20,-20]"> -->
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'
let amapManager = new VueAMap.AMapManager()
export default {
    
    
  name: 'Test',
  components: {
    
    

  },
  data () {
    
    
    return {
    
    
      markerIcon: '<div class="jumper"><div></div><div></div><div></div></div>',
      center: [116.405994, 39.915378],
      zoom: 5,
      // zoom: 13,
      amapManager,
      mapEvents: {
    
    
        init (o) {
    
    
          o.setMapStyle('amap://styles/edbc379c8110f081c564f98d8c59f80c');//自定义的高德地图的样式
        }
      },
      markers: [
        {
    
    
          id: '01',
          position: [116.405994, 39.915378],
          icon: '',
        }, {
    
    
          id: '02',
          position: [121.33666, 31.148908],
          icon: '',
        }

      ]
    }
  },
  methods: {
    
    
  },
  created () {
    
    


  },
  mounted () {
    
    
    setTimeout(() => {
    
    
      // 遍历出一个marker,改变它的icon
      for (let i = 0; i < this.markers.length; i++) {
    
    
        if (this.markers[i].id === '02') {
    
    
          this.markers[i].icon = this.markerIcon
          this.zoom = 15
          this.center = this.markers[i].position
        }
      }
    }, 5000);
  }
}
</script>

猜你喜欢

转载自blog.csdn.net/yuyu_2019/article/details/110263036