njDaTuSha/src/pages/pg4/Map.vue

<template>
  <div class="map-pg" ref="el"></div>
  <PageLoading :loading="loading" />
</template>

<script setup>
  import { onMounted, ref, watch } from 'vue';
  import PageLoading from '@/components/PageLoading.vue';
  import countryGPS from '@/utils/country_gps';
  import { getCountry } from '@/utils/maputil';

  const emit = defineEmits(['click']);

  const el = ref();
  const mapRef = ref();
  const loading = ref(false);

  // 展示部分国家
  const mockCountries = [
    '中国',
    '俄罗斯',
    '哈萨克斯坦',
    '伊朗',
    '印度',
    '泰国',
  ];

  // getGPSOfBDCountries();

  onMounted(() => {
    const map = new BMap.Map(el.value);
    const point = new BMap.Point(116.404, 39.915); // 天安门
    map.centerAndZoom(point, 3);
    mapRef.value = map;

    // 绑定事件
    map.addEventListener('click', (e) => {
      console.log('-----start-----')
      loading.value = true;
      const { point } = e;
      getCountry(point.lng, point.lat).then(x => {
        emit('click', x);
        loading.value = false;
      console.log('-----end-----')
      }).catch((err) => {
        console.error(err);
        loading.value = false;
      });
    });

    // 显示 marker
    const icon = new BMap.Icon('./images/logo.png', new BMap.Size(16, 16));    
    mockCountries.forEach(country => {
        const target = countryGPS[country];
        if (!target) {
          console.error(`${country} 在世界GPS列表中不存在`)
          return;
        }
        
        const point = new BMap.Point(target[0], target[1]);
        const marker = new BMap.Marker(point, { icon });
        map.addOverlay(marker);
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);

        // map.getOverlays().forEach((overlay) => {
        //   console.log('------overlay-------', overlay)
        //   overlay.setAnimation(BMAP_ANIMATION_BOUNCE);
        // });
      });

    // window._AMapSecurityConfig = {
    //   securityJsCode:'f33684b9573195f9f91a4c8bc779d7e2',
    // }
    // AMapLoader.load({
    //   key: "378f2af0c01b00ec919ace1699f2466f",              // 申请好的Web端开发者Key，首次调用 load 时必填
    //   version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //   plugins: [],           // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    // }).then((AMap)=>{
    //   const map = new AMap.Map(el.value, {
    //     mapStyle: 'amap://styles/bff59c60c62af794ee93f1befde78625',
    //     zoom: 3,
    //   });

    //   const countries = Object.keys(countryGPS);
    //   countries.forEach((country) => {
    //     const position = countryGPS[country];
    //     const found = mockCountries.filter(x => x===country)[0];

    //     console.log('----position---->', position);
        
    //     const marker = new AMap.Marker({
    //       map,
    //       offset:[-100, -16],
    //       content: `
    //         <div class="map-marker-box">
    //           <div class="map-marker-title">${country}</div>
    //           ${found ? '<div class="map-marker-icon"/>' : ''}
    //         </div>
    //       `,
    //       position,
    //     });
      // });

      // mockCountries.forEach(country => {
      //   const target = countryGPS[country];
      //   if (!target) {
      //     console.error(`${country} 在世界GPS列表中不存在`)
      //     return;
      //   }
        
      //   const marker = new AMap.Marker({
      //     map,
      //     offset:[-100, -16],
      //     content: `
      //       <div class="map-marker-box">
      //         <div class="map-marker-title">${country}</div>
      //         <div class="map-marker-icon"/>
      //       </div>
      //     `,
      //     position: target,
      //   });
      // });

    // }).catch(e => {
    //   console.error(e);
    // })
  });

</script>

<style lang="less" scoped>
.map-pg {
  width: 100%;
  height: 100%;
}
</style>