 <template>
  <div class="map-container">
    <div class="amap-page-container">
      <div class="input-search">
        <el-input class="inpu" placeholder="请输入检索地址" v-model="address">
          <template #suffix>
            <el-button icon="el-icon-search"  @click="searchMap()"></el-button>
          </template>
        </el-input>
      </div>
      <el-amap vid="amap" :plugin="plugin" class="amap-demo" :center="center" :zoom="zoom" :events='events'>
        <!-- 点击显示标记 -->
        <el-amap-marker v-for="(marker, index) in markers" :key="marker.index" :position="marker.position"
          :icon="marker.icon" :title="marker.title" :events="marker.events" :visible="marker.visible"
          :draggable="marker.draggable" :vid="index"></el-amap-marker>
      </el-amap>
      <div class="map-address">详细地址：{{address}}</div>
      <div class="map-mark">
        <div class="mark-item">
          <span>经度</span>
          <el-input placeholder="请输入经度" v-model="lng" maxlength="20"></el-input>
        </div>
        <div class="mark-item">
          <span>纬度</span>
          <el-input placeholder="请输入纬度" v-model="lat" maxlength="20"></el-input>
        </div>
        <el-button class="mark" @click="handelQuery">查询</el-button>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "v-map",
    props: ["Nowlnglat"],
    data() {
      let self = this;
      return {
        map:{
          address:'',
          lng:'',
          lat:''
        },
        tishi: '',
        //地图相关
        address: '', //获取的位置
        zoom: 13, // 地图缩放
        center: [122.59996, 26.197646], // 初始中心
        lng: 0, //经纬度
        lat: 0,
        loaded: false,
        markers: [],// 点击显示的标记默认的定位
        //  自动定位到当前位置
        plugin: [
          {
          timeout: 1000, //超过10秒后停止定位
          panToLocation: true, //定位成功后将定位到的位置作为地图中心点
          zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见
          pName: 'Geolocation',
          events: {
            init(o) {
              // o 是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  self.address = result.formattedAddress;
                  self.lng = result.position.lng;
                  self.lat = result.position.lat;
                  self.map.address= self.address
                  self.map.lng=self.lng
                  self.map.lat=self.lat
                  if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){
                    let  Clnglat =self.Nowlnglat
                    self.center =  Clnglat
                    self.markers = [{position: Clnglat,}]
                    let geocoder = new AMap.Geocoder({radius: 1000});
                    //根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示
                    geocoder.getAddress(Clnglat,function (status, result) {
                      if (status === "complete" && result.info === "OK") {
                        self.address=result.regeocode.formattedAddress
                        self.lng=self.Nowlnglat[0]
                        self.lat=self.Nowlnglat[1]
                        self.map.address= self.address
                        self.map.lng=self.lng
                        self.map.lat=self.lat
                      }
                    });
                  }else{
                    self.center = [self.lng, self.lat];
                    self.markers = [{position: self.center}]
                  }
                  self.loaded = true;
                  self.$nextTick();
                } else {
                  o.getCityInfo((status, result) => {
                    if (result && result.center) {
                      self.address = result.province+result.city;
                      self.lng = result.center[0];
                      self.lat = result.center[1];
                      self.map.address= self.address
                      self.map.lng=self.lng
                      self.map.lat=self.lat
                      if(self.Nowlnglat[0] != null && self.Nowlnglat[1] != null){
                        let  Clnglat =self.Nowlnglat
                        self.center =  Clnglat
                        self.markers = [{position: Clnglat,}]
                        let geocoder = new AMap.Geocoder({radius: 1000});
                        //根据坐标获取位置  将经纬度 转换后成 地址信息 放在 输入框展示
                        geocoder.getAddress(Clnglat,function (status, result) {
                          if (status === "complete" && result.info === "OK") {
                            self.address=result.regeocode.formattedAddress
                            self.lng=self.Nowlnglat[0]
                            self.lat=self.Nowlnglat[1]
                            self.map.address= self.address
                            self.map.lng=self.lng
                            self.map.lat=self.lat
                          }
                        });
                      }else{
                        self.center = result.center;
                        self.markers = [{position: self.center,}]
                      }
                      self.loaded = true;
                      self.$nextTick();
                    }
                  });
                }
              });
            }
          }
        }
        ],
        // 点击地图获取当前位置并显示标记
        events: {
          click(e) {
            self.chaadd(e.lnglat)
          }
        }
      }
    },
    created() {
      this.$emit('mapDing', this.map);
    },
    methods: {
      searchMap() {
        let that = this;
        let address = this.address;
        that.map.address=that.address
        var geocoder = new AMap.Geocoder({
          city: "", //城市设为北京，默认：“全国”
        });
        geocoder.getLocation(address, function(status, result) {
          if (status === 'complete' && result.geocodes.length) {
            var lnglat = result.geocodes[0].location;
            that.center = [lnglat.lng, lnglat.lat]
            that.lng = lnglat.lng;
            that.lat = lnglat.lat;
            that.markers = [{
              position: that.center,
            }]
            that.map.lng=that.lng
            that.map.lat=that.lat
          } else {
            that.address=undefined
            that.lng=undefined
            that.lat=undefined
            that.$message({
              type: "error",
              message: "根据地址查询位置失败",
            });
          }
        });
        that.$emit('mapDing', that.map);

      },
      chaadd(e) {
        let self = this;
        let { lng, lat} = e;
        self.lng = lng;
        self.lat = lat;
        self.map.lng=self.lng
        self.map.lat=self.lat
        self.center = [self.lng, self.lat];
        self.loaded = true;
        self.markers = [{position: self.center,}]
        var geocoder = new AMap.Geocoder({
          radius: 1000 //范围，默认：500
        });
        var marker = new AMap.Marker();
        function regeoCode() {
          var lnglat = [lng, lat]
          geocoder.getAddress(lnglat, function(status, result) {
            if (status === 'complete' && result.regeocode) {
              self.address = result.regeocode.formattedAddress;
              self.map.address=self.address
            } else if (status === 'no_data') {
              self.$message({
                type: "error",
                message: "无法取到定位数据",
              });
            } else {
              self.address=undefined
              self.lng=undefined
              self.lat=undefined
              self.$message({
                type: "error",
                message: "根据经纬度查询地址失败",
              });
            }
          });
        }
        regeoCode();
         self.$emit('mapDing', self.map);

      },
      handelQuery(){
        let self =this
        self.map.lng=parseFloat(self.lng)
        self.map.lat=parseFloat(self.lat)
        self.center = [parseFloat(self.lng), parseFloat(self.lat)];
        self.loaded = true;
        self.markers = [{
          position: self.center,
        }]
        var geocoder = new AMap.Geocoder({
          radius: 1000 //范围，默认：500
        });
        // var marker = new AMap.Marker();
        function regeoCode() {
          var lnglat = [parseFloat(self.lng), parseFloat(self.lat)]
          geocoder.getAddress(lnglat, function(status, result) {
            console.log(status, result);
            if (status === 'complete' && result.regeocode) {
              self.address = result.regeocode.formattedAddress;
              self.map.address=self.address
            } else if (status === 'no_data') {
              self.$message({
                type: "error",
                message: "无法取到定位数据",
              });
            } else {
              self.address=undefined
              self.lng=undefined
              self.lat=undefined
              self.$message({
                type: "error",
                message: "根据经纬度查询地址失败:" + JSON.stringify(result),
              });
            }
          });
        }
        regeoCode();
        self.$emit('mapDing', self.map);
      }
    }
  }
</script>
<style lang="scss" scoped>
.map-container{
  height: 526px;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: center;
  .amap-page-container {
    height: 400px;
    width: 100%;
    position: relative;
    .input-search {
      position: absolute;
      top: 10px;
      right: 0px;
      z-index: 5;
      width: 400px;
      ::v-deep .el-input__inner{
        width: 271px !important;
        padding: 0 10px;
      }
      .inpu {
        width: calc(100% - 10px);
      }
      ::v-deep .el-input__suffix{
        position: absolute;
        height: 100%;
        right: 0 !important;
        top: 0;
      }
      .el-button--medium{
        height: 36px;
        width: 120px;
        background: #f2f6fc;
        display: flex;
        padding: 0;
        align-items: center;
        justify-content: center;
      }
    }
  }
  .map-address{
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .map-mark{
    display: flex;
    flex-direction: row;
    .mark-item{
      width: 248px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-right: 20px;
      span{
        white-space: nowrap;
        margin-right: 20px;
      }
      ::v-deep .el-input__inner{
        width: 200px !important;
      }
      ::v-deep .el-input-number__decrease{
        display: none;
      }
      ::v-deep .el-input-number__increase{
        display: none;
      }
    }
    .mark{
      width: 80px;
      height: 32px;
      background: #087CF2;
      color: #ffffff;
      border: 1px solid #087cf2;
      padding: 0;
    }
  }
}
</style>
