<!--  -->
<template>
  <div class>
    <div>
      <el-form :inline="true" :model="point" class="demo-form-inline" size="mini">
        <el-form-item label="经度">
          <el-input clearable v-model="point.lng"></el-input>
        </el-form-item>
        <el-form-item label="维度">
          <el-input clearable v-model="point.lat"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入地区检索" v-model="addr" clearable @clear="clearMap()" @change="addrChange()"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="locationSearch">定位</el-button>
          <el-button type="primary" size="mini" @click="locationSave">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="mapBox">
      <div id="map">加载数据，请稍候...</div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用
  props:['lnglat'],
  components: {},
  data() {
    //这里存放数据
    return {
      map:null,
      zoom: 4.5,
      point: { lng: "", lat: "" },
      center: [104.776123,33.118667],
      locationForm: {
        lat: "",
        lng: "",
      },
      addr:"",
      geocoder:null,
      marker:null
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    initMap() {
      //创建地图
      var that = this;
      this.map = new AMap.Map("map", {
        resizeEnable: true,
        center: that.center,
        zoom: that.zoom
      });
      AMap.plugin(
        [
          "AMap.ToolBar",
          "AMap.Scale",
          "AMap.MouseTool",
          "AMap.Geocoder",
          "AMap.PolyEditor"
        ],
        () => {
          //   this.map.addControl(new AMap.ToolBar());
          this.map.addControl(new AMap.Scale({ position: "RB" }));

          this.geocoder = new AMap.Geocoder({
            city: "全国",
            radius: 1000
          });
        }
      );
      this.tileLayer1 = new AMap.TileLayer({
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=img_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 10
      }); //卫星图层
      this.tileLayer2 = new AMap.TileLayer({
        // 图块取图地址
        tileUrl:
          "http://t{0,1,2,3,4,5,6,7}.tianditu.gov.cn/DataServer?T=cta_w&tk=888bc7de1a5f14aa1b335b02e558d9b3&x=[x]&y=[y]&l=[z]",
        zIndex: 101
      });
      // this.map.add(this.tileLayer1);
      // this.map.add(this.tileLayer2);
      this.geocoder = new AMap.Geocoder({
          city: "全国", //城市设为北京，默认：“全国”
      });
      this.map.on('click', (e)=>{
        this.point.lng = e.lnglat.getLng();
        this.point.lat = e.lnglat.getLat();
        this.map.clearMap();
        this.marker = new AMap.Marker({
          position: new AMap.LngLat(this.point.lng,this.point.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '北京'
        });
        this.map.add(this.marker);
      });
    },
    //通过经纬度搜索定位
    locationSearch() {
      if (this.point.lat && this.point.lng) {
        this.addr = ""
        this.renderMarker()
      }
    },
    locationSave(){
      this.$emit('func',this.point)
    },
    addrChange() {
      var _this = this;
      if(!this.addr){
        return false;
      }
      this.geocoder.getLocation(this.addr, function(status, result) {
          if (status === 'complete'&&result.geocodes.length) {
              var lnglat = result.geocodes[0].location
              _this.point.lng = lnglat.lng;
              _this.point.lat = lnglat.lat;

              _this.renderMarker()
          }else{
            this.$message({
              message: '根据地址查询位置失败',
              type: 'error'
            });
          }
      });
    },
    clearMap(){
      this.map.clearMap();
    },
    renderMarker(){
      this.map.clearMap();
      this.marker = new AMap.Marker({
          position: new AMap.LngLat(this.point.lng,this.point.lat),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: '北京'
      });
      this.map.add(this.marker);
      this.map.setFitView(this.marker,9)
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.initMap()
    this.point.lng = this.lnglat[0]
    this.point.lat = this.lnglat[1]
    this.renderMarker()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.mapBox{
  height: 400px;
  #map{
    height: 100%;
  }
}
/deep/.el-form-item__content{
  width: 130px;
}
/deep/.el-form-item:last-child .el-form-item__content{
  width: 96px;
  text-align: right;
}
/deep/.el-form-item--mini .el-form-item__label{
  color: #92c2f3;
}
/deep/.el-input--mini .el-input__inner{
  // color: #333;
  // background: rgba(255, 255, 255, 0.75);
}
</style>