<template>
  <div class="map-container">
    <mt-header class="header" title="地图位置" fixed>
      <div slot="left">
        <mt-button icon="back" @click="$router.back(-1)"></mt-button>
      </div>
    </mt-header>
    <el-amap ref="map" vid="amapDemo" :amap-manager="amapManager" :center="center" :zoom="zoom" :events="events" class="amap-demo">
      <el-amap-marker vid="component-marker" :position="center" ></el-amap-marker>
    </el-amap>
  </div>

</template>

<script>
  import { AMapManager } from 'vue-amap';
  let amapManager = new AMapManager();
  let params = {}
  export default {
    name: "GaodeMap",
    data(){
          return {
            amapManager,
            zoom: 12,
            center: [116.4,39.9],
            events: {
              init: (o) => {
                console.log(o.getCenter())
                console.log(this.$refs.map.$$getInstance())
                o.getCity(result => {
                  console.log(result)
                })
              },
              'moveend': () => {
              },
              'zoomchange': () => {
              },
            },
            plugin: ['ToolBar', {
              pName: 'MapType',
              defaultType: 0,
              events: {
                init(o) {
                  console.log(o);
                }
              }
            }]
          }
    },
    created(){
      // 从路由中获取中心点
      if(this.$route.query){
        const center = [116.4,39.9]
        if(this.$route.query.lng){
          center[0] = Number(this.$route.query.lng)
        }
        if(this.$route.query.lat){
          center[1] = Number(this.$route.query.lat)
        }
        console.log(center)
        this.center = center
      }
    }
  }
</script>

<style scoped>
  .map-container{
    width: 100vw;
    height: 100vh;
  }
  .amap-demo{
    width:100%;
    height:100%;
  }
</style>