popularize-admin/admin-pc/src/views/popularizeActivity/modules/TencentMapPicker.vue

<template>
  <div>
    <div class="map-box">
      <div class="map" ref="map" style="height: 400px" ></div>
      <div class="map-search">
        <div>
          <a-input-search id="place" v-model="searchValue" placeholder="请输入详细地址" enter-button @search="searchAddress(searchValue)" />
        </div>
        <div>
          <ul v-if="kwData.length">
            <li v-for="(item, index) in kwData" :key="index" @click="selectKeyword(item)">{{ item.address }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TencentMapPicker',
  props: {
    latitude: {
      type: Number|String,
      default: 0
    },
    longitude: {
      type: Number|String,
      default: 0
    }
  },
  watch: {
    latitude(newVal, oldVal) {
      console.info(`newVal`,newVal,`oldVal`,oldVal)
      if (newVal) {
        this.form.latitude = newVal
        // this.$nextTick(()=>{
        //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
        // })
      }
    },
    longitude(newVal, oldVal) {
      console.info(`newVal`,newVal,`oldVal`,oldVal)
      if (newVal) {
        this.form.longitude = newVal
        // this.$nextTick(()=>{
        //     this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
        // })
      }
    }
  },
  data() {
    return {
      searchValue: '', //地图搜索
      form: {
        longitude: 116.397128,
        latitude: 39.916527
      },
      kwData:[]
    }
  },
  mounted() {
    let that = this
    if (that.script) return;
    that.script = document.createElement('script');
    that.script.type = 'text/javascript';
    that.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=DGFBZ-JU76M-34A63-6BU47-2FLJH-XLBCN`;
    document.head.appendChild(that.script);
    that.script.onload = () => {
      window.initMap = that.initMap;
      that.$nextTick(() => {
        that.initMap();
      });
    };
  },
  methods: {
    // 地图
    initMap() {
      // 搜索类
      this.searchEr = new window.TMap.service.Search({ pageSize: 15 });
      // 地图主类
      this.map = new window.TMap.Map(this.$refs.map, {
        backgroundColor: '#f7f7f7',
        mapStyleId: 'style1',
        zoom: 14,
        mapTypeControlOptions: {
          mapTypeIds: [],
        },
        draggableCursor: 'crosshair',
        center: new window.TMap.LatLng(this.form.latitude, this.form.longitude),
      });
      // 图层类
      this.markerLayer = new window.TMap.MultiMarker({
        map: this.map,
        geometries: [],
      });
      // 地址逆解析
      this.geocoder = new window.TMap.service.Geocoder();
      const setMarker = () => {
        const latlng = new window.TMap.LatLng(this.form.latitude, this.form.longitude);
        this.markerLayer.setGeometries([]);
        let geometries = this.markerLayer.getGeometries();
        geometries.push({
          id: '-1',
          position: latlng,
        });
        this.markerLayer.updateGeometries(geometries);
      };
      this.map.on('click', (e) => {
        this.form.longitude = e.latLng.getLng(); // 经度
        this.form.latitude = e.latLng.getLat(); // 纬度
        setMarker();
        this.getAddressFormat();
      });
      if (this.form.longitude) {
        this.map.setCenter(new window.TMap.LatLng(this.form.latitude, this.form.longitude));
        setMarker();
      }
    },
    selectKeyword(event){
      this.map.setCenter(new window.TMap.LatLng(event.location.lat, event.location.lng));
      this.kwData = []
    },
    // 地图搜索
    searchAddress(keyword = '') {
      if (!keyword) return;
      this.$jsonp('https://apis.map.qq.com/ws/place/v1/suggestion', {
        key: 'DGFBZ-JU76M-34A63-6BU47-2FLJH-XLBCN',
        output: 'jsonp',
        keyword: keyword,
      }).then((res) => {
        console.log(`res`,res)
        if (res.status === 0) {
          this.kwData = res.data
        } else {
          this.kwData = []
        }
      }).catch((e) => {
        console.log(e)
      })
      this.markerLayer.setGeometries([]);
      this.searchEr.searchRectangle({
        keyword,
        bounds: this.map.getBounds(),
      })
        .then((result) => {
          console.info(`result`,result)
          const { location = {} } = result.data[0] || {};
          const { lat = 39.916527, lng = 116.397128 } = location;
          this.map.setCenter(new window.TMap.LatLng(lat, lng));
          result.data.forEach((item, index) => {
            let geometries = this.markerLayer.getGeometries();
            // 点标注数据数组
            geometries.push({
              id: String(index),
              position: item.location,
            });
            // 绘制地点标注
            this.markerLayer.updateGeometries(geometries);
          });
        });
    },
    getAddressFormat() {
      const { longitude, latitude } = this.form;
      this.geocoder
        .getAddress({
          location: new window.TMap.LatLng(latitude, longitude),
        })
        .then((res) => {
          const {
            formatted_addresses: { recommend = '' },
          } = res.result || {};
          this.searchValue = recommend
          this.form.hotelDetailAddress = recommend;
          this.$emit('onLocationSelected', this.form);
          console.log(this.form);
        });
    },
  }
}
</script>
<style scoped>
.map-box {
  position: relative;

}
.map-search {
  z-index: 1000;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 300px;

}

button {
  border-radius: 0;
}

.icons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time {
  margin-top: 15px;
  width: 100%;
  font-size: 12px;
  flex-wrap: wrap;
  height: 70%;
}
ul{
  background: white;
  list-style-type: none;
  padding-left: 0px;
  height: 280px;
  overflow: scroll;
}
li{
  padding-left: 6px;
  font-size: 10px;
  text-align: left;
  height: 40px;
  line-height: 15px;
  display: flex;
  align-items: center;
}
li:hover{
  cursor: pointer;
  background: #f5f5f5;
}
</style>