高德地图区域选择、标点、搜索地址组件

<template>
  <div class="container">
    <div id="container" :style="{ height: height }" />
    <div class="input-card" v-show="type !== 3">
      <el-button @click="createPolygon()" v-show="cztype == 1 || showadd"
        >画定区域</el-button
      >
      <!-- <el-button @click="polyEditor.open()">指定坐标</el-button> -->
      <el-button @click="editClose">结束编辑</el-button>
    </div>
    <div class="serch">
      <div>
        <el-input
          id="mapInput"
          type="text"
          placeholder="请输入关键字(选定后搜索)"
          v-model="serach"
          onfocus='this.value=""'
        />
      </div>
    </div>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "d94db7683b03635d1577e6591b3196c8" //你的秘钥
};
let polyEditor = "";
// import { defineProps } from "vue";
// const propsa = defineProps({
//   title: {
//     type: String,
//     default: "编辑"
//   },
//   pathList: {
//     type: [Object, String],
//     default: ""
//   }
// });
export default {
  name: "AreaMap",
  data() {
    return {
      map: null,
      // polyEditor: null,
      coordList: "",
      timer: "",
      form: {
        longitude: "",
        latitude: ""
      },
      pathList: [],
      serach: "",
      type: 0,
      showadd: false,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null
    };
  },
  props: {
    rowdata: {
      type: [Object, String],
      default: ""
    },
    cztype: {
      type: String,
      default: ""
    },
    height: {
      type: String,
      default: ""
    }
  }, // 接收传过来的数据

  mounted() {
    // axios
    //   .get(
    //     "https://restapi.amap.com/v3/geocode/geo?key=6abf1a62cc7f55d8741f0a14b25e23ac&address=" +
    //       this.pageList.start_address_province +
    //       this.pageList.start_address +
    //       "&city=" +
    //       this.pageList.start_city
    //   )
    //   .then(res => {
    //     if (res.data.status == "1") {
    //       let locationArr = res.data.geocodes[0].location;
    //       let location = locationArr.split(",");
    //       this.statrtlatlnt = location[0] + "," + location[1];
    //       this.somedistence();
    //     } else {
    //       this.$message.error("拾取失败,请重新核对地址");
    //     }
    //   });
    if (this.cztype !== 1 && this.rowdata.mapPoints !== null) {
      this.pathList = JSON.parse(this.rowdata.mapPoints);
      this.start();
      console.log("修改");
    } else if (this.cztype == 1) {
      this.echart();
      console.log("添加");
    } else {
      this.start();
      this.showadd = true;
    }
  },
  methods: {
    start() {
      this.timer = setInterval(this.echart, 1000); // 注意: 第一个参数为方法名的时候不要加括号;
    },
    async echart() {
      AMapLoader.reset();
      clearInterval(this.timer);
      await AMapLoader.load({
        key: "977a4de8d2786c57bbb5bd77fa3a88bb", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ToolBar",
          "AMap.Driving",
          "AMap.PolygonEditor",
          "AMap.PlaceSearch",
          "AMap.AutoComplete"
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then(AMap => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            center: [113.08, 34.94] //初始化地图中心点位置
          });
          let that = this;
          const autoOptions = {
            input: "mapInput"
          };
          this.auto = new AMap.AutoComplete(autoOptions);
          this.placeSearch = new AMap.PlaceSearch({
            map: this.map,
            // panel: "panel", // 结果列表将在此容器中进行展示。
            // city: "010", // 兴趣点城市
            autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            extensions: "base" //返回基本地址信息
          });
          this.auto.on("select", this.select); //注册监听，当选中某条记录时会触发

          that.map.on("click", e => {
            console.log(that.rowdata.longitude, "地图点击");
            if (
              that.rowdata.longitude == "" ||
              that.rowdata.longitude == null
            ) {
              // 获取经纬度
              that.rowdata.longitude = e.lnglat.lng;
              that.rowdata.latitude = e.lnglat.lat;
              const marker1 = new AMap.Marker({
                icon: "",
                draggable: true,
                position: [e.lnglat.lng, e.lnglat.lat]
              });
              marker1.on("dragging", function (e) {
                console.log(that.rowdata.longitude);
                that.rowdata.longitude = e.lnglat.lng;
                that.rowdata.latitude = e.lnglat.lat;
              });
              that.map.add(marker1);
            }

            // this.map.setFitView();
          });

          this.map.setFitView();
        })
        .catch(e => {
          console.log(e);
        });
      this.initEditor();
    },
    select(e) {
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name); //关键字查询查询
    },

    initEditor() {
      let path1 = [];

      path1 = this.pathList || [];

      const polygon1 = new AMap.Polygon({
        path: path1
      });
      this.map.add([polygon1]);
      polyEditor = new AMap.PolygonEditor(this.map);
      // console.log(polyEditor);
      // console.dir(polyEditor);
      polyEditor.on("add", data => {
        console.log(data);
        this.coordList = data.lnglat;
        const polygon = data.target;
        polygon.on("dblclick", () => {
          polyEditor.setTarget(polygon);
          polyEditor.open();
        });
      });
      if (this.cztype == 2) {
        setTimeout(() => {
          polyEditor.setTarget(polygon1);
          polyEditor.open();
        }, 1000);
      }
      polygon1.on("dblclick", () => {
        polyEditor.setTarget(polygon1);
        polyEditor.open();
      });
      let that = this;

      if (this.rowdata.longitude !== "" && this.rowdata.longitude !== null) {
        const marker1 = new AMap.Marker({
          icon: "",
          draggable: true,
          position: [this.rowdata.longitude, this.rowdata.latitude]
        });
        this.map.add(marker1);
        marker1.on("dragging", function (e) {
          that.rowdata.longitude = e.lnglat.lng;
          that.rowdata.latitude = e.lnglat.lat;
          that.$emit("submit", that.pathList, that.rowdata);
        });
      }

      this.map.setFitView();

      return polyEditor;
    },
    createPolygon() {
      polyEditor.close();
      polyEditor.setTarget();
      polyEditor.open();
    },
    editClose() {
      let that = this;
      polyEditor.on("end", function (event) {
        // event.target 即为编辑后的多边形对象
        //多边形的坐标
        this.coordList = event.target.getPath();
        // console.log("coordList", this.coordList);
        const mapList = [];
        this.coordList.forEach(v => {
          console.log("v", v.lng, "--", v.lat);
          mapList.push([v.lng, v.lat]);
        });
        // that.$emit("mapList", mapList);
        that.$emit("submit", mapList, that.rowdata);
      });
      polyEditor.close();
    }
  }
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  // height: 300px;
}

.container {
  position: relative;
  border: 1px solid rgb(204, 204, 204);

  .input-card {
    position: absolute;
    bottom: 15px;
    right: 15px;
  }
  .serch {
    position: absolute;
    top: 5px;
    left: 5px;
  }
}
</style>

//注意在app.vue中加入 否则搜索无效
.amap-sug-result {
  z-index: 9999 !important;
}