配置腾讯地图01

<template>
  <div>
    <el-form>
      <el-row>
        <el-col :span="12">
          <el-form-item label="经度" prop="longitude">
            <el-input style="width: 200px" v-model="form.longitude"></el-input>
          </el-form-item></el-col>
        <el-col :span="12">
          <el-form-item label="纬度" prop="latitude">
            <el-input style="width: 200px" v-model="form.latitude"></el-input>
          </el-form-item></el-col>
      </el-row>
      <el-form-item>
        <div class="map-box">
          <div class="map" ref="map" style="height: 500px" />
          <div class="map-search">
            <el-input v-model="searchValue" placeholder="请输入要检索的位置信息" />
            <el-button @click="searchAddress(searchValue)" type="primary">搜索</el-button>
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchValue: '', //地图搜索
      form: {
        longitude: '',
        latitude: '',
      }
    }
  },
  created() {
    if (this.script) return;
    this.script = document.createElement('script');
    this.script.type = 'text/javascript';
    this.script.src = `//map.qq.com/api/gljs?v=1.exp&libraries=service&key=ILYBZ-YJC6U-BXMVA-GMCPB-LLJ5Q-ITFEQ`;
    document.head.appendChild(this.script);
    this.script.onload = () => {
      window.initMap = this.initMap;
      this.$nextTick(() => {
        this.initMap();
      });
    };
  },
  methods: {
    // 地图
    initMap() {
      // 搜索类
      this.searchEr = new window.TMap.service.Search({ pageSize: 10 });
      // 地图主类
      this.map = new window.TMap.Map(this.$refs.map, {
        backgroundColor: '#f7f7f7',
        mapStyleId: 'style1',
        zoom: 12,
        mapTypeControlOptions: {
          mapTypeIds: [],
        },
        draggableCursor: 'crosshair',
        center: new window.TMap.LatLng(32.1023232, 118.822693),
      });
      // 图层类
      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();
      }
    },
    // 地图搜索
    searchAddress(keyword = '') {
      if (!keyword) return;
      this.markerLayer.setGeometries([]);
      this.searchEr
        .searchRectangle({
          keyword,
          bounds: this.map.getBounds(),
        })
        .then((result) => {
          console.log(result,'看看坐标');

          const { location = {} } = result.data[0] || {};
          const { lat = 28.616202, lng = 115.942693 } = 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 || {};
          console.log(recommend, 'recommend');
          this.form.hotelDetailAddress = recommend;
          console.log(this.form);
        });
    },
  }
}
</script>
//样式
<style>
.map-box {
  position: relative;

  .map-search {
    z-index: 1000;
    display: flex;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 350px;

    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%;
}
</style>