zhgdyun/src/components/map/gd-map.vue

<template>
  <div>
    <!-- 坐标拾取 -->
    <el-dialog
      @close="closeMap"
      :title="$t('message.alarmValueSet.coordinatePick')"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
      width="80%"
    >
      <div slot="default" class="coordinate-picking">
        <!-- 地址 -->
        {{$t('message.alarmValueSet.gdAddress')}}:
        <el-input
          size="medium"
          v-model="coordinateInfo.city"
          id="tipinput"
          :placeholder="$t('message.alarmValueSet.placeholder')"
        ></el-input>
        <!--                <el-button type="primary" size="medium" @click="search">查询</el-button>-->
        <!-- 经度 -->
        {{$t('message.alarmValueSet.longitude')}}:
        <el-input
          size="medium"
          v-model="coordinateInfo.lng"
          :placeholder="$t('message.alarmValueSet.placeholder')"
        ></el-input>
        <!-- 纬度 -->
        {{$t('message.alarmValueSet.latitude')}}:
        <el-input
          size="medium"
          v-model="coordinateInfo.lat"
          :placeholder="$t('message.alarmValueSet.placeholder')"
        ></el-input>
        <el-button size="medium" type="primary" @click="submit">
          <!-- 提交 -->
          {{$t('message.alarmValueSet.submit')}}
        </el-button>
      </div>
      <div id="container"></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    addProjectForm: {
      type: Object,
      default: {}
    }
  },
  name: "gd-map",
  data() {
    return {
      coordinateInfo: {
        city:"",
        lng: "",
        lat: ""
      },
      map: {},
      auto: {},
      placeSearch: {},
      dialogVisible: true
    };
  },
  mounted() {
    // console.log("过来了吗", this.addProjectForm);
    this.coordinateInfo.city = this.addProjectForm.areaName
    this.coordinateInfo.lng = this.addProjectForm.longitude 
    this.coordinateInfo.lat = this.addProjectForm.latitude
    this.$nextTick(() => {
      this.initMap();
    });
  },
 
  methods: {
    initMap() {
      //地图加载
      this.map = new AMap.Map("container", {
        resizeEnable: true,
        center:[ this.addProjectForm.longitude != "" ? this.addProjectForm.longitude : "112.5", 
                 this.addProjectForm.latitude != "" ? this.addProjectForm.latitude : "23"
               ]
      });
      //输入提示
      var autoOptions = {
        input: "tipinput"
      };
      this.auto = new AMap.Autocomplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map
      }); //构造地点查询类
      AMap.event.addListener(this.auto, "select", this.select); //注册监听，当选中某条记录时会触发
      this.map.on("click", e => {
        this.coordinateInfo.lng = e.lnglat.getLng();
        this.coordinateInfo.lat = e.lnglat.getLat();
        // console.log('您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置单击了地图！');
      });
    },
    select(e) {
      console.log("select", e);
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },
    search() {
      // console.log('a', e.poi.adcode, 'name', e.poi.name, '----------placeSearch', this.placeSearch)
      // this.placeSearch.setCity(e.poi.adcode);
      // this.placeSearch.search(e.poi.name);  //关键字查询查询
    },
    submit() {
      this.$emit("save", this.coordinateInfo);
    },
    closeMap() {
      this.$emit("closeMap", false);
    }
  }
};
</script>

<style lang="less" scoped>
.flex {
  display: flex;
}

.coordinate-picking {
  .flex;
  /*justify-content: space-between;*/
  align-items: center;
  margin-bottom: 10px;

  .el-input {
    width: 20%;
    margin: 0 10px 0 5px;
  }

  .el-button {
    margin-right: 10px;
  }
}

#container {
  width: 100%;
  height: 600px;
}

/deep/ .el-dialog__body {
  padding-top: 10px;
}
</style>