farming-business-shop-web/src/views/manage/address/map.vue

<template>
  <el-dialog
    title="地图选点"
    :visible.sync="dialogVisible"
    width="1200px"
    :before-close="dialogVisible == false"
    :destroy-on-close="true"
  >
    <div>
      <el-input
        placeholder="请输入内容"
        v-model="input"
        class="input-with-select"
        id="input"
        style="width: 90%"
      >
      </el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="autoInput"
      ></el-button>
    </div>
    <div style="margin-top: 10px">已选择地址:{{ address }}</div>
    <div id="container" style="margin-top: 10px"></div>

    <el-form
      label-width="120px"
      :model="form"
      :rules="rules"
      ref="ruleForm"
      style="margin-top: 30px"
    >
      <el-form-item label="详情地址" prop="addrDetail">
        <el-input v-model="form.addrDetail" style="width: 500px"></el-input>
      </el-form-item>
      <el-form-item label="仓库" prop="storeHouse">
        <el-select
          value-key="value"
          clearable
          v-model="form.storeHouseId"
          placeholder="请选择"
          @change="selectChange"
          style="width: 300px"
        >
          <el-option
            v-for="(item, index) in houseList"
            :label="item.name"
            :key="index"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="设为默认地址">
        <el-switch
          v-model="form.defaultTag"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="closeMap">取 消</el-button>
      <el-button type="primary" @click="SubmitMapPoint">确 定</el-button>
    </span>
  </el-dialog>
</template>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}
</style>
<script>
import { getWarehouseInfo } from "@/api/manage/address";
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  data() {
    return {
      map: null,
      marker: null,
      geocoder: null,
      dialogVisible: false,
      input: "",
      markers: [],
      address: "",
      addressParams: {},
      form: {
        storeHouseId: "",
      },
      rules: {
        addrDetail: [
          { required: true, message: "请填写详细地址", trigger: "blur" },
        ],
      },
      houseList: [],
    };
  },
  mounted() {
    this.initAMap();
  },
  unmounted() {
    this.map?.destroy();
  },
  methods: {
    selectChange(val) {
      if (!val) this.form.storeHouse = "";
    },
    loadMap(data) {
      // 处理传入的数据
      if (data) {
        if (typeof data.cityCode === "number") {
          this.gethouse(data.cityCode);
        }
        this.form = {
          ...data,
          defaultTag: data.defaultTag ?? 0,
          storeHouseId: JSON.parse(data.storeHouse).storeHouseId,
        };
        console.log(JSON.parse(data.storeHouse));
        // 构建完整地址
        this.address = [
          data.provinceName,
          data.cityName,
          data.countyName,
          data.addr,
        ]
          .filter(Boolean)
          .join("");
        // 获取仓库信息
      } else {
        this.form = {};
      }
      this.dialogVisible = true;
      this.initAMap();
    },

    closeMap() {
      this.address = "";
      this.input = "";
      this.dialogVisible = false;
      this.form = {};
      this.map?.destroy();
    },
    SubmitMapPoint() {
      const selectedHouse = this.houseList.find(
        (item) => item.id === this.form.storeHouseId
      );
      if (selectedHouse) {
        let params = {
          name: selectedHouse.name || "",
          id: selectedHouse.id || "",
        };
        this.form.storeHouse = params;
      }

      if (!this.address) {
        this.$message.error("请先在地图选择省市区！");
        return;
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let params = {
            map: this.addressParams,
            form: this.form,
          };
          this.$emit("address", params);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    gethouse(cityCode) {
      getWarehouseInfo({ cityCode: cityCode }).then((res) => {
        if (res.code == 200) {
          this.houseList = res.data;
        }
      });
    },

    // 获取搜索信息
    autoInput() {
      let that = this;
      var keywords = this.input;
      if (this.markers.length > 0) {
        this.map.remove(this.markers);
      }
      AMap.plugin(["AMap.PlaceSearch"], function () {
        //构造地点查询类
        var placeSearch = new AMap.PlaceSearch({
          pageSize: 5, // 单页显示结果条数
          pageIndex: 1, // 页码
          map: that.map, // 展现结果的地图实例
          // panel: "panel", // 结果列表将在此容器中进行展示。
          autoFitView: true, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        });
        placeSearch.search(keywords);
        placeSearch.on("markerClick", function (e) {
          let obj = { ...e.data };
          obj.address =
            e.data.pname +
            "" +
            e.data.cityname +
            "" +
            e.data.adname +
            "" +
            e.data.address +
            "" +
            e.data.name;
          e.data.cityCode = obj.adcode.substring(0, 4) + "00";
          that.addressParams = obj;
          that.address = obj.address;
          that.gethouse(e.data.cityCode);
        });
      });
    },

    getLocation() {
      const _this = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          if (status === "complete" && result.info === "OK") {
            console.log(result.rectangle.split(";"));
            let xy = result.rectangle.split(";")[0].split(",");
            console.log("xxx", _this.map.getCenter());
            _this.map.setCenter(xy);
          }
        });
      });
    },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "aae243a4d33170d5331abec91fe2cd0c",
      };
      let that = this;
      AMapLoader.load({
        key: "2e75f4c22217359628e22c2e170b4778", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.Geocoder",
          "AMap.Autocomplete",
          "AMap.PlaceSearch",
          "AMap.Scale",
          "AMap.OverView",
          "AMap.Geolocation",
          "AMap.ToolBar",
          "AMap.MapType",
          "AMap.PolyEditor",
          "AMap.CircleEditor",
        ], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
        .then((AMap) => {
          that.map = new AMap.Map("container", {
            // 设置地图容器id
            viewMode: "2D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别.
            resizeEnable: true,
          });
          that.geocoder = new AMap.Geocoder();
          that.map.on("click", that.handleMapClick);

          setTimeout(() => {
            that.getLocation();
          }, 500);
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleMapClick(e) {
      if (this.marker) {
        if (this.marker) {
          this.marker.setMap(null);
          this.marker = null;
        }
      }
      if (!this.marker) {
        this.marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [e.lnglat.lng, e.lnglat.lat],
          imageSize: new AMap.Size(12, 12),
          offset: new AMap.Pixel(-13, -30),
        });
        this.marker.setMap(this.map);
        this.regeoCode(e.lnglat);
      }
    },
    markerBlur(e) {
      console.log(e);
    },
    regeoCode(lnglat) {
      let that = this;
      this.map.add(this.marker);
      this.marker.setPosition(lnglat);
      // 创建高德地图的 Geocoder 实例
      this.geocoder.getAddress(lnglat, function (status, result) {
        if (status === "complete" && result.regeocode) {
          var address = result.regeocode.formattedAddress;
          result.regeocode.addressComponent.location = lnglat;
          result.regeocode.addressComponent.address = address;
          let addrs = result.regeocode.addressComponent;
          result.regeocode.addressComponent.pname = addrs.province;
          result.regeocode.addressComponent.cityname = addrs.city;
          result.regeocode.addressComponent.adname = addrs.district;
          result.regeocode.addressComponent.pcode =
            result.regeocode.addressComponent.adcode.substring(0, 3) + "000";
          result.regeocode.addressComponent.cityCode =
            result.regeocode.addressComponent.adcode.substring(0, 4) + "00";
          that.gethouse(result.regeocode.addressComponent.cityCode);
          that.address = address;
          console.log("cccc", that.address);
          that.$forceUpdate();
          that.addressParams = result.regeocode.addressComponent;
        } else {
          that.$message.error("根据经纬度查询地址失败");
        }
      });
    },
  },
};
</script>
<style>
html,
body,
#container {
  height: 100%;
  width: 100%;
}

.amap-icon img,
.amap-marker-content img {
  width: 25px;
  height: 34px;
}

.marker {
  position: absolute;
  top: -20px;
  right: -118px;
  color: #fff;
  padding: 4px 10px;
  box-shadow: 1px 1px 1px rgba(10, 10, 10, 0.2);
  white-space: nowrap;
  font-size: 12px;
  font-family: "";
  background-color: #25a5f7;
  border-radius: 3px;
}

.input-card {
  width: 18rem;
  z-index: 170;
}

.input-card .btn {
  margin-right: 0.8rem;
}

.input-card .btn:last-child {
  margin-right: 0;
}
</style>