cmanager/src/components/map/selectLocation.vue

<template>
  <div class="app-container">
    <el-autocomplete
      v-model="addressLocation"
      style="width:100%;"
      popper-class="autoAddressClass"
      :fetch-suggestions="querySearchAsync"
      :trigger-on-focus="false"
      placeholder="详细地址"
      clearable="false"
      @select="handleSelect"
      :disabled="!isCanEdit"
      v-show="type !== 'view'"
      @input="addressChangeHandle"
    >
      <template slot-scope="{ item }">
        <div style="overflow:hidden;">
          <div class="title">{{ item.title }}</div>
          <span class="address ellipsis">{{ item.address }}</span>
        </div>
      </template>
    </el-autocomplete>

    <div ref="mapContainer" style="width:100%;height:300px;" v-if="isCanEdit" />
    <div ref="viewMap" style="width:100%;height:300px;" v-else />
  </div>
</template>

<script>
/* eslint-disable */
import { getcoder, querySearch } from "@/api/tenant/map";
export default {
  props: {
    lat: {
      type: "string",
      default: 23.1315381
    },
    lng: {
      type: "string",
      default: 113.3324436
    },
    address: String,
    isCanEdit: Boolean,
    type: {
      type: "string",
      default: ""
    }
  },
  data() {
    return {
      map: "", // 地图实例
      mk: "", // Marker实例
      map2: "", // 地图实例
      mk2: "", // Marker实例,
      addressLocation: this.address,
      key: "MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
      addressTip: []
    };
  },
  mounted() {
    this.initMap();
  },
  watch: {},
  methods: {
    addressChangeHandle(val) {
      this.$emit("input", val);
      if (val == "") {
        this.$emit("addressDel", "删除了地址数据");
      }
    },
    // 初始化地图
    initMap() {
      var that = this;

      if (this.isCanEdit) {
        var point = new qq.maps.LatLng(this.lat, this.lng);
        // 1、挂载第一张地图
        this.map = new qq.maps.Map(this.$refs.mapContainer, {
          center: point,
          zoom: 19,
          //启用缩放控件
          zoomControl: true,
          //地图缩放控件参数
          zoomControlOptions: {
            position: qq.maps.ControlPosition.TOP_LEFT
          },
          //地图比例尺控件，若为false则不显示比例尺控件
          scaleControl: false
        });

        // 3、设置图像标注并绑定拖拽标注结束后事件
        this.mk = new qq.maps.Marker({
          position: point,
          draggable: true,
          map: that.map
        });
        // 绑定拖拽标注结束后事件
        qq.maps.event.addListener(this.mk, "dragend", function(e) {
          that.getAddrByPoint(e.latLng);
        });
        //6、浏览器定位
        if (this.type === "add") {
          this.geolocation();
        }
        // 7、绑定点击地图任意点事件
        qq.maps.event.addListener(this.map, "click", function(e) {
          that.getAddrByPoint(e.latLng);
        });
      } else {
        var point2 = new qq.maps.LatLng(this.lat, this.lng);
        // 1、挂载第二张地图
        this.map2 = new qq.maps.Map(this.$refs.viewMap, {
          center: point2,
          zoom: 19,
          //地图缩放控件参数
          zoomControlOptions: {
            position: qq.maps.ControlPosition.TOP_LEFT
          },
          //地图比例尺控件，若为false则不显示比例尺控件
          scaleControl: false
        });
        // 2、设置图像标注并绑定拖拽标注结束后事件
        this.mk2 = new qq.maps.Marker({
          position: point2,
          draggable: false,
          map: that.map2
        });
      }
    },
    // 浏览器定位函数
    geolocation() {
      var that = this;
      var geolocation = new qq.maps.Geolocation(
        "MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5",
        "后台管理"
      );
      geolocation.getLocation(this.showPosition, this.showErr, {
        timeout: 20000,
        failTipFlag: true
      });
    },
    showPosition(position) {
      this.getAddrByPoint({
        lat: position.lat,
        lng: position.lng
      });
    },
    showErr() {
      console.log("定位失败！");
    },
    // // 2、逆地址解析函数
    getAddrByPoint(point) {
      var currentPoint = new qq.maps.LatLng(point.lat, point.lng);
      var that = this;
      var location = point.lat + "," + point.lng;
      getcoder(location, encodeURI(this.key), 0).then(res => {
        that.mk.setPosition(currentPoint);
        that.map.panTo(currentPoint);
        let obj = {
          address: res.data.result.address,
          lng: point.lng,
          lat: point.lat
        };
        that.addressLocation = obj.address;
        that.$emit("addAddress", obj);
      });
    },
    async querySearchAsync(queryString, cb) {
      await querySearch(queryString, encodeURI(this.key)).then(res => {
        if (res.data.status === 0) {
          this.addressTip = res.data.data;
        }
      });
      var results = this.addressTip;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    // 8-2、选择地址
    handleSelect(item) {
      this.addressLocation = item.address;
      var point = new qq.maps.LatLng(item.location.lat, item.location.lng);
      this.mk.setPosition(point);
      this.map.panTo(point);
      let obj = {
        title: item.title,
        address: item.address,
        lng: item.location.lng,
        lat: item.location.lat
      };
      this.$emit("addAddress", obj);
    }
  }
};
</script>

<style lang="scss" scoped>
.autoAddressClass {
  li {
    i.el-icon-search {
      margin-top: 11px;
    }
    .mgr10 {
      margin-right: 10px;
    }
    .title {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .address {
      line-height: 1;
      font-size: 12px;
      color: #b4b4b4;
      margin-bottom: 5px;
    }
  }
}
</style>