foodie-server/foodie_admin_vue/src/components/googmap.vue

<template>
  <div class="content">
    <div style="display: flex;align-items: center;margin-bottom: 20px;">
      <div>{{$t('mendian.SearchAddress')}}：</div>
      <input
          type="text"
          v-model="ssneir"
          :placeholder="$t('mendian.Pleasekeywords')"
          @keyup.enter="selectPoint"
      />
      <button style="margin-left: 10px;" @click="selectPoint">{{$t('mendian.SearchAddress')}}</button>
      <div style="margin-left: 20px;">{{$t('mendian.currentlocation')}}:{{address}}</div>
    </div>
    <!-- 添加地址选择提示 -->
    <div v-if="isLoadingAddress" style="background-color: #f0f9ff; color: #1890ff; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center;">
      <i class="el-icon-loading" style="margin-right: 8px;"></i>
      正在获取地址信息...
    </div>
    <div v-else-if="!address" style="background-color: #fef0f0; color: #f56c6c; padding: 10px; margin-bottom: 10px; border-radius: 4px; display: flex; align-items: center;">
      <i class="el-icon-warning" style="margin-right: 8px;"></i>
      {{$t('mendian.Selectmapobtainaddress')}}
    </div>
    <div :style="googleMapStyle" class="googleMap" :id="mapID"></div>
  </div>
</template>

<script>
import {getAddr} from '@/api/infouser/user';
import { Loader } from '@googlemaps/js-api-loader' //引入
export default {
  name:'googmap',
  props: {
    //selectPoint时是地图选点
    //POLYGON是绘制地图多边形区域

    //地图id
    mapID: {
      type: String,
      default: () => {
        return 'googleMap'
      },
    },
    //谷歌地图样式
    googleMapStyle: {
      type: Object,
      default: () => {
        return {
          wdith: '100%',
          height: '500px',
        }
      },
    },
    //谷歌地图配置
    mapOptions: {
      type: Object,
      default: () => {
        return {
          //为了关闭默认控件集,设置地图的disableDefaultUI的属性为true
          disableDefaultUI: false,
          // 启用缩放和平移
          gestureHandling: 'greedy',
          panControl: true,
          zoomControl: true,
          scaleControl: true,
          //关闭街景
          streetViewControl: false,
        }
      },
    },
    //谷歌地图中心点
    googleMapCenter: {
      type: Object,
      default: () => {
        return {
          lat: 21.031859020043132,
          lng:105.82760815495604
        }
      },
    },
    //谷歌地图缩放级别
    zoom: {
      type: Number,
      default() {
        return 11
      },
    },
    //谷歌地图图形path
    mapPath: {
      type: String,
      default: () => {
        return ''
      },
    },
  },
  data() {
    return {
      //地图选点回显值
      longlat: 21.031859020043132 + ',' + 105.82760815495604,
      //标记点
      marker: [],
      //图形实例
      graphicalExample: null,
      //图形路径经纬度
      graphicalPath: [],
      apiKey: 'AIzaSyDRpbm3HCpmUjfaPu3TgklBGwWJWrvIXDw', //旧的AIzaSyAnz_I0VUlPvt73NIocb_7tomJOW4CdwHk
      googleMap:null,
      address:'',
      ssneir:'',
      isLoadingAddress: false
    }
  },
  created() {
    this.$nextTick(() => {
      const loader = new Loader({
        apiKey: this.apiKey, //之前的key
        version: 'weekly', //版本
        libraries: ['places', 'drawing'], //插件库places为基础库 drawing为绘制工具库
        region: 'Canada',
        language: this.$t('loding.language'),
      })
      const mapOptions = {
        center: { lat: this.googleMapCenter.lat * 1, lng: this.googleMapCenter.lng * 1 }, //中心点
        zoom: this.zoom, //缩放级别
        mapId:this.mapID,
        ...this.mapOptions, //其他配置
      }
      loader.load().then(async (google) => {
        this.googMap = await google.maps.importLibrary("maps");
        this.googMarker = await google.maps.importLibrary("marker");
        const map = new this.googMap.Map(document.getElementById(this.mapID), mapOptions);
        this.googleMap = map;
        this.googleApi = google;
        this.googleMap.addListener('click', (e) => {
          this.clickGmap(e)
        })
      }).catch((e) => {
        // do something
        // console.log(e)
      })
    })
  },
  methods:{
    // 逆向地址
    getdizhi(lat){
      this.isLoadingAddress = true;
      
      // id参数用于语言设置，不是用户ID，可以传空字符串或任意值
      var params={
        latlng:lat,
        id:''  // 空字符串即可，后端会使用默认语言
      }
      console.log('调用getAddr API，参数:', params);
      getAddr(params).then(res=>{
        console.log('地址API响应:',res)
        this.address = res.data.address
        this.$emit('golat',{lat:lat,address:res.data.address})
        this.isLoadingAddress = false;
      }).catch(error => {
        console.error('获取地址失败:', error);
        // 即使API失败，也要触发事件，使用默认地址
        this.$emit('golat',{lat:lat,address:'地址获取失败'})
        this.isLoadingAddress = false;
      })
    },
    //搜索地点方法
    selectPoint() {
      if (!this.ssneir) {
        this.$message.warning('请输入搜索关键词');
        return;
      }
      if (!this.googleApi || !this.googleMap) return;
      const service = new this.googleApi.maps.places.PlacesService(this.googleMap);
      service.textSearch({ query: this.ssneir }, (results, status) => {
        if (status === this.googleApi.maps.places.PlacesServiceStatus.OK && results.length > 0) {
          const loc = results[0].geometry.location;
          const lat = loc.lat();
          const lng = loc.lng();
          this.googleMap.setCenter({ lat, lng });
          this.googleMap.setZoom(15);
          if (this.marker) this.marker.map = null;
          this.marker = new this.googMarker.AdvancedMarkerElement({
            map: this.googleMap,
            position: { lat, lng },
          });
          this.getdizhi(lat + ',' + lng);
        } else {
          this.$message.error('搜索失败，请重试');
        }
      });
    },
    //点击地图回调
    clickGmap(e) {
      console.log('点击回调',e)
      this.longlat = e.latLng.lat() + ',' + e.latLng.lng();
      console.log('设置坐标:', this.longlat);
      this.marker.map = null;
      this.marker = new this.googMarker.AdvancedMarkerElement({
        map:this.googleMap,
        position: { lat: e.latLng.lat(), lng: e.latLng.lng() },
      });
      console.log('开始调用getdizhi方法');
      this.getdizhi(this.longlat);
    },
    //获取经纬度
    // getLongLat() {
    // 	return this.longlat
    // },
    //设置地图中心点位置
    // setMapPanBy(e) {
    // 	let latlng = new this.googleApi.maps.LatLng(e.lat,e.lng)
    // 	this.googleMap.setCenter(latlng)
    // 	this.marker[0].setPosition(latlng);
    // },
  }
}
</script>

<style>
</style>