liebao-web/src/components/orderComponents/orderAMap.vue

<template>
  <el-dialog v-loading='loading' element-loading-text="拼命加载中" width="80%" destroy-on-close :visible.sync="dialogTableVisible">
    <el-form v-if="showSearch" ref="ruleForm" class="demo-form-inline" :inline="true">
      <el-form-item class="search-box">
        <el-input @keydown.enter.native="seachEnterFun" v-model="searchKey" type="search" id="search" style="width: 219px" placeholder="请输入关键字进行搜索" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="map-btn" @click="searchMap">搜索</el-button>
      </el-form-item>
      <div class="tip-box" id="searchTip"></div>
      <el-form-item label="经度" prop="lng">
        <el-input maxlength="11" v-model="lng" style="width: 140px" disabled></el-input>
      </el-form-item>
      <el-form-item label="纬度：" prop="lat">
        <el-input maxlength="10" v-model="lat" style="width: 140px" disabled></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="map-btn" @click="clickSureMap">确定</el-button>
      </el-form-item>
      <div v-show="showAddressList" class="address-list">
        <div class="address" @click="getGeoCode(v)" v-for="(v,i) in promptList" :key="i">
          <span class="name">{{v.name}}</span>
          <span class="district">{{v.district}}{{v.address}}</span>
        </div>
      </div>
    </el-form>
    <amap ref="map" :zoom="zoom" :center="center" style="height: 600px;" class="amap-demo">
      <amap-marker v-for="(marker,index) in markers" :key="index" :offset="marker.offset" :position="marker.position" :icon="marker.icon" :label="marker.label" />
    </amap>
  </el-dialog>
</template>

<script>
import { getInputPrompt, getGeoCode, getMapData } from "../../api/order.js";

export default {
  data() {
    return {
      searchKey: "",
      dialogTableVisible: false,
      order: {},
      markers: [],
      texts: [],
      defaultCity: "北京",
      zoom: 18,
      center: [116.39747132275389, 39.908857325556404],
      promptList: [],
      address: "",
      addressDetail: {},
      lng: "",
      lat: "",
      showAddressList: false,
      showSearch: false,
      loading: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    seachEnterFun(e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode == 13) {
        this.searchMap();
      }
    },
    getGeoCode(v) {
      this.showAddressList = false;
      let address = v.district + v.address + v.name;
      getGeoCode({ address }).then((res) => {
        if (res.code === 200) {
          console.log("object", res.data);
          this.addressDetail = res.data[0];
          this.addressDetail.address = address;
          let splitPoint = this.addressDetail.location.indexOf(",");
          console.log("splitPoint", splitPoint);
          this.lng = this.addressDetail.location.slice(0, splitPoint);
          this.lat = this.addressDetail.location.slice(splitPoint + 1);
          this.center = [this.lng, this.lat];
          this.markers = [
            {
              id: 1,
              position: this.center,
              icon: "/static/image/map_current.png",
            },
          ];
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    searchMap() {
      if (!this.searchKey.trim()) {
        return this.$message({
          type: "error",
          message: "请先输入关键字后再搜索！",
        });
      }
      getInputPrompt({ keywords: this.searchKey }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            this.promptList = res.data;
            this.showAddressList = true;
          }
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    init(data, mapData) {
      let orderDistance =
        mapData.orderDistance > 1000
          ? (mapData.orderDistance / 1000).toFixed(1) + "公里"
          : mapData.orderDistance + "米";
      let sendM = {
        id: 1,
        position: [data.sendLng, data.sendLat],
        icon: "/static/image/map-fa.png",
        offset: [10, -50],
        label: {
          content: `商家距离目的地${orderDistance}`,
          direction: "top",
        },
      };
      let receiptM = {
        id: 2,
        position: [data.receiptLng, data.receiptLat],
        icon: "/static/image/map-shou.png",
      };

      // 中心点
      this.center = [
        ((data.receiptLng * 1 + data.sendLng * 1) / 2).toFixed(6),
        ((data.receiptLat * 1 + data.sendLat * 1) / 2).toFixed(6),
      ];
      // marker标记
      this.markers = [sendM, receiptM];
      if (mapData.shipperLng && mapData.shipperLat) {
        let distance =
          mapData.shipperDistance > 1000
            ? (mapData.shipperDistance / 1000).toFixed(1) + "公里"
            : mapData.shipperDistance + "米";
        let riderM = {
          id: 3,
          position: [mapData.shipperLng, mapData.shipperLat],
          icon: "/static/image/map-rider.png",
          offset: [15, -50],
          label: {
            content:
              data.buttonStatus === 2
                ? `骑手距离商家${distance} | 预计${mapData.riderArriveMinute}分钟后到店`
                : data.buttonStatus === 3
                ? `骑手距离目的地${distance} | 预计${mapData.estimateArriveTime}送达`
                : "",
            direction: "top",
          },
        };
        this.markers.push(riderM);
      }
      this.$nextTick(() => {
        console.log('显示地图',this.$refs.map.$map);
        this.$refs.map.$map.setFitView();
        setTimeout(() => {
          this.$refs.map.$map.setFitView();
        }, 2000);
      });
    },
    setDialogStatus(data) {
      this.dialogTableVisible = true;
      this.loading = true;
      getMapData({ orderId: data.id }).then((res) => {
        if (res.code === 200) {
          this.loading = false;
          this.init(data, res.data);
        } else {
          this.loading = false;
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    chooseLocation() {
      this.dialogTableVisible = true;

      this.showSearch = true;
      this.searchKey = "";
      this.lat = "";
      this.lng = "";
    },
    clickSureMap() {
      this.$emit("getAddressDetail", this.addressDetail, this.lng, this.lat);
      this.dialogTableVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .amap-marker-label {
  font-size: 12px;
  background: #fc7200;
  color: #fff;
  padding: 4px 8px;
  border: none;
}
/deep/ .amap-marker-label:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fc7200;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.map-btn {
  background: #fc7200;
  border: none;
}
.demo-form-inline {
  position: relative;
  display: flex;
  align-items: center;
  .address-list {
    position: absolute;
    left: 0;
    top: 45px;
    border: 2px solid #3333;
    background: #fff;
    padding: 0 10px;
    z-index: 2;
    .address {
      line-height: 30px;
      cursor: pointer;
      .name {
        color: #333333;
      }
      .district {
        color: #999999;
        margin-left: 10px;
      }
    }
  }
}
/* 图标大小修改 */
/deep/ .el-dialog__header {
  display: none !important;
}
#container {
  width: 100%;
  height: 400px;
}
/deep/ .amap-container img {
  width: 35px !important;
  height: 45px !important;
}
</style>