<template>
  <div id="app">
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arriveCoor: [108.947025, 34.2613255], //坐标点
      arrive: "", //位置信息,
      Amap: null
    };
  },
  mounted() {
    this.mapDraw(this.arriveCoor);
    // this.mapCoor(this.arriveCoor);
  },
  methods: {
    mapDraw(arriveCoor) {
      this.Amap = new AMap.Map("map-location", {
        //map-location是嵌地图div的id
        resizeEnable: true, //是否监控地图容器尺寸变化
        zoom: 16, //初始化地图层级
        center: arriveCoor //初始化地图中心点
      });
      // 定位点
      // this.addMarker(arriveCoor);
    },
    // 实例化点标记
    addMarker(arriveCoor) {
      var _this = this;
      var marker = new AMap.Marker({
        icon: "", //图片ip
        imageSize: "20px",
        position: arriveCoor,
        offset: new AMap.Pixel(-13, -30),
        // 设置是否可以拖拽
        draggable: true,
        cursor: "move",
        // 设置拖拽效果
        raiseOnDrag: true
      });
      // marker.setMap(this.Amap);
      this.Amap.add([marker])
    },
    // 查询坐标
    mapCoor(lnglatXY) {
      var _this = this;
      AMap.service("AMap.Geocoder", function() {
        //回调函数
        var geocoder = new AMap.Geocoder({});
        geocoder.getAddress(lnglatXY, function(status, result) {
          if (status === "complete" && result.info === "OK") {
            //获得了有效的地址信息:
            _this.arrive = result.regeocode.formattedAddress;
          } else {
            _this.arrive = "暂无位置";
          }
        });
      });
    }
  }
};
</script>

<style>
.amap-wrapper {
  width: 100%;
  height: 100%;
}
</style>
