admin-web-master/src/components/newmap/index.vue

<template>
  <div style="position: relative;width: 100%;">
    <div id="mapContainer" class="map"></div>
    <div class="search-box">
      <input v-model="searchQuery" placeholder="输入地址进行搜索" />
      <div style="box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);display: flex;align-items: center;background: #fff;padding: 0 20px;border-radius: 5px;overflow: hidden;margin-left: 10px;">
        <i class="el-icon-delete" style="margin-right: 10px;color: #3F9B6A;"></i>
        <button type="button" @click="searchLocation">清除</button>
      </div>
    </div>
    <div v-if="searchResults.length > 0" class="search-results">
      <ul>
        <li v-for="(result, index) in searchResults" :key="index" @click="selectResult(result)">
          {{ result.title }}
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'TencentMap',
    props: {
      lat: {
        type: Number,
        default: 30.67
      },
      lng: {
        type: Number,
        default: 104.06
      },
      isonloed: {
        type: Boolean,
        default: false
      },
      isx: {
        type: Boolean,
        default: true
      },
      message: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        map: null,
        marker: null,
        address: '',
        searchQuery: '', // 搜索查询
        searchResults: [], // 搜索结果列表
      };
    },
    mounted() {
      // 初始化地图
      this.initMap();
    },
    methods: {
      // 选择某一条搜索结果
      selectResult(result) {
        const latLng = new qq.maps.LatLng(result.location.lat, result.location.lng);
        // 移动地图中心到选择的位置
        this.map.setCenter(latLng);
        // 更新标记位置
        this.marker.setPosition(latLng);
        // 获取地址信息
        this.getAreaCode(result.location.lat, result.location.lng);
        
      },
      searchLocation() {
        let that = this
        if (!this.searchQuery) {
          this.$message.error('请输入搜索地址');
          return;
        }
        // 使用腾讯地图的搜索服务
        this.$jsonp("https://apis.map.qq.com/ws/place/v1/search", {
          keyword: this.searchQuery,
          key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', // 使用你的腾讯地图API key
          output: "jsonp",
          boundary: 'nearby(' + that.lat + ',' + that.lng + ',1000,1)'
        }).then((res) => {
          console.error(res)
          if (res.status === 0 && res.data.length > 0) {
            this.searchResults = res.data; // 存储搜索结果
          } else {
            this.$message.error('未找到相关地址');
            this.searchResults = []; // 清空搜索结果
          }
        }).catch(err => {
          this.$message.error("搜索失败");
          console.error(err);
        });
      },
      initMap() {
        if (this.isx) {
        
        } else {
          this.lat = this.message.split(',')[0]
          this.lng = this.message.split(',')[1]
        }
        // 将经纬度转换为腾讯地图的LatLng对象
        const centerLatLng = new qq.maps.LatLng(this.lat, this.lng);
        // 创建地图实例
        this.map = new qq.maps.Map(document.getElementById('mapContainer'), {
          center: centerLatLng,
          zoom: 13,
          mapStyleId: 'style1'
        });
        // 创建标记
        if (this.isonloed) {
          this.marker = new qq.maps.Marker({
            position: centerLatLng,
            map: this.map
          });
        } else {
          this.marker = new qq.maps.Marker({
            // position: centerLatLng,
            map: this.map
          });
        }
        if (this.isx) {
          qq.maps.event.addListener(this.map, 'click', this.onMapClick);
        } else {
          const centerLatLng1 = new qq.maps.LatLng(this.message.split(',')[0], this.message.split(',')[1]);
          console.error(this.message)
          this.marker = new qq.maps.Marker({
            position: centerLatLng1,
            map: this.map
          });
        }
        // 添加点击事件监听器
        // qq.maps.event.addListener(this.marker, 'click', this.onMarkerClick);
        // 添加地图点击事件监听器
        // // 获取地址信息
        // this.getAreaCode(this.lat, this.lng);
      },
      onMarkerClick() {
        alert('您点击了标记点');
      },
      onMapClick(event) {
        // 获取点击位置的经纬度
        const newLatLng = event.latLng;
        // 更新标记位置
        this.marker.setPosition(newLatLng);
        this.getAreaCode(newLatLng.getLat(), newLatLng.getLng());
        // 更新父组件中的经纬度
        // 获取新的地址信息
      },
      getAreaCode(lat, lng) {
        this.searchQuery = ''
        // 清空搜索结果
        this.searchResults = [];
        let that = this;
        //这里可以直接this.$jsonp地址传入你的经纬度;
        that.$jsonp("https://apis.map.qq.com/ws/geocoder/v1/?", {
          location: `${lat},${lng}`, // 经纬度
          key: 'PGRBZ-Z3FRJ-DTYFB-XNX4X-DC6HZ-MCFYU', //这里就是要开启那个service不然会报错让你开启
          output: "jsonp", // output必须jsonp 不然会超时
        }).then((res) => {
          if (res.message == 'Success') {
            console.log(res);
            that.address = res.result.address
            that.$emit('updatecenter', {
              lat: lat,
              lng: lng,
              address: that.address
            });
          } else {
            this.$message.error(res.message)
          }
        }).catch(err => {
          this.$message.error("获取城市编码失败")
          console.error(err)
        })
      }
    }
  }
</script>
<style scoped>
  .map {
    width: 100%;
    height: 300px;
  }
  .search-box {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 99;
    /* background: #fff; */
    /* padding: 10px; */
    /* border-radius: 5px; */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); */
    /* width: 280px; */
    display: flex;
    justify-content: space-between;
  }
  .search-box input {
    /* padding: 5px; */
    padding: 15px 8px;
    margin-right: 5px;
    font-size: 10px;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid #eee;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  .search-box button {
    padding: 15px 0;
    background-color: #fff;
    /* color: #fff; */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    height: 100%;
    box-sizing: border-box;
    font-size: 10px;
    color: -internal-light-dark(black, white);
  }
  .search-box button:hover {
    background-color: #fff;
  }
  .search-results {
    position: absolute;
    top: 60px;
    left: 10px;
    z-index: 999;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    width: 280px;
    
  }
  .search-results::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .search-results ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .search-results li {
    padding: 5px;
    cursor: pointer;
  }
  .search-results li:hover {
    background-color: #f0f0f0;
  }
</style>