|
@@ -0,0 +1,369 @@
|
|
|
+<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
|
|
|
+ );
|
|
|
+ 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>
|