ufutx_official_website/src/components/pc/ProductMap.vue

<template>
  <div id='productMap'>
    <!--  <div>-->
    <!--    <img style='width: 200px;height: 200px;' :src='homeMap' alt='fff'>-->
    <!--  </div>-->
    <div class='ui-productMap-box'>
      <div id="productMapV"></div>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
import { useRouter } from "vue-router";
import WOW from 'wow.js' // 引入路由
import homeMap from "@/assets/img/pMap.png";
import { useI18n } from 'vue-i18n'
const { t,locale } = useI18n()

const address = import.meta.env.VITE_APP_ADDRESS
const phone = import.meta.env.VITE_APP_PHONE
const email = import.meta.env.VITE_APP_EMAIL
const qq = import.meta.env.VITE_APP_QQ
const company = import.meta.env.VITE_APP_COMPANYNAME
const blog = import.meta.env.VITE_APP_BLOG
const qqgroup = import.meta.env.VITE_APP_QQGROUP

const router = useRouter()

const id = ref('')
const points =computed(()=>{
  return [
    { lng: 116.38, lat: 39.87,name:t('message.ProductMap.list') },
    { lng: 121.46, lat: 31.25,name:t('message.ProductMap.list1') },
    { lng: 113.26, lat: 23.13,name:t('message.ProductMap.list2') },
    { lng: 113.75, lat: 23.02,name:t('message.ProductMap.list3') },
    { lng: 114.17, lat: 22.28,name:t('message.ProductMap.list4') },
    { lng: 121.78, lat: 24.67,name:t('message.ProductMap.list5') },
    { lng: 120.21, lat: 30.25,name:t('message.ProductMap.list6') },
    { lng: 113.78, lat: 34.76,name:t('message.ProductMap.list7') },
    { lng: 104.07, lat: 30.57,name:t('message.ProductMap.list8') },
    { lng: 106.55, lat: 29.56,name:t('message.ProductMap.list9') },
    { lng: 114.30, lat: 30.59,name:t('message.ProductMap.list10') },
    { lng: 118.09, lat: 24.48,name:t('message.ProductMap.list11') },
    { lng: 114.42, lat: 23.11,name:t('message.ProductMap.list12') },
    { lng: 113.12, lat: 23.02,name:t('message.ProductMap.list13') },
    { lng: 120.59, lat: 31.30,name:t('message.ProductMap.list14') },
    { lng: 118.80, lat: 32.06,name:t('message.ProductMap.list15') },
    { lng: 112.94, lat: 28.23,name:t('message.ProductMap.list16') },
    { lng: 108.94, lat: 34.34,name:t('message.ProductMap.list17') },
    { lng: 113.85, lat: 34.04,name:t('message.ProductMap.list18') },
    { lng: 120.70, lat: 27.99,name:t('message.ProductMap.list19') },
    { lng: 116.68, lat: 23.35,name:t('message.ProductMap.list20') },
    { lng: 110.36, lat: 21.27,name:t('message.ProductMap.list21') },
    { lng: 110.93, lat: 21.66,name:t('message.ProductMap.list22') },
    { lng: 108.37, lat: 22.82,name:t('message.ProductMap.list23') },
    { lng: 110.18, lat: 25.24,name:t('message.ProductMap.list24') },
    { lng: 117.23, lat: 31.82,name:t('message.ProductMap.list25') },
    { lng: 113.54, lat: 22.19,name:t('message.ProductMap.list26') },
    { lng: 117.20, lat: 39.09,name:t('message.ProductMap.list27') },
    { lng: 102.83, lat: 24.88,name:t('message.ProductMap.list28') },
    { lng: 120.99, lat: 36.49,name:t('message.ProductMap.list29') },
    { lng: 113.39, lat: 22.52,name:t('message.ProductMap.list30') },
    { lng: 103.83, lat: 36.06,name:t('message.ProductMap.list31') },
    { lng: 110.20, lat: 20.05,name:t('message.ProductMap.list32') },
    { lng: 114.31, lat: 34.80,name:t('message.ProductMap.list33') },
    { lng: 115.86, lat: 28.68,name:t('message.ProductMap.list34') },
    { lng: 119.30, lat: 26.07,name:t('message.ProductMap.list35') },
    { lng: 109.44, lat: 18.29,name:t('message.ProductMap.list36') },
    { lng: 125.32, lat: 43.82,name:t('message.ProductMap.list37') },
    { lng: 91.17,  lat: 29.65,name:t('message.ProductMap.list38') },
    { lng: 117.12, lat: 36.65,name:t('message.ProductMap.list39') },
    { lng: 114.51, lat: 38.04,name:t('message.ProductMap.list40') },
    { lng: 123.46, lat: 41.68,name:t('message.ProductMap.list41') },
    { lng: 106.63, lat: 26.65,name:t('message.ProductMap.list42') },
    { lng: 112.55, lat: 37.87,name:t('message.ProductMap.list43') },
    { lng: 118.68, lat: 24.87,name:t('message.ProductMap.list44') },
    { lng: 119.41, lat: 32.39,name:t('message.ProductMap.list45') },
    { lng: 115.66, lat: 34.42,name:t('message.ProductMap.list46') },
    { lng: 112.58, lat: 33.02,name:t('message.ProductMap.list47') },
    { lng: 113.58, lat: 22.27,name:t('message.ProductMap.list48') },
    { lng: 114.93, lat: 25.83,name:t('message.ProductMap.list49') },
    { lng: 116.37, lat: 23.55,name:t('message.ProductMap.list50') },
    { lng: 120.31, lat: 31.49,name:t('message.ProductMap.list51') },
    { lng: 126.54, lat: 45.80,name:t('message.ProductMap.list52') },
    { lng: 87.62,  lat: 43.83,name:t('message.ProductMap.list53') },
    { lng: 112.45, lat: 34.62,name:t('message.ProductMap.list54') },
    { lng: 121.62, lat: 29.86,name:t('message.ProductMap.list55') },
    { lng: 109.78, lat: 39.61,name:t('message.ProductMap.list56')},
    { lng: 112.12, lat: 32.01,name:t('message.ProductMap.list57')	 },
    { lng: 111.70, lat: 29.03,name:t('message.ProductMap.list58')   },
    { lng: 112.95, lat: 27.83,name:t('message.ProductMap.list59') },
    { lng: 115.38, lat: 22.79,name:t('message.ProductMap.list60') },
    { lng: 113.13, lat: 29.36,name:t('message.ProductMap.list61') },
    { lng: 121.61, lat: 38.91,name:t('message.ProductMap.list62') },
    { lng: 119.65, lat: 29.08,name:t('message.ProductMap.list63') },
    { lng: 120.89, lat: 31.98,name:t('message.ProductMap.list64') },
    { lng: 119.97, lat: 31.81,name:t('message.ProductMap.list65') },


    { lng: 	-123.12, lat: 49.28,name:t('message.ProductMap.list66') },
    { lng:   100.48, lat: 13.76,name:t('message.ProductMap.list67') },
    { lng:   101.69, lat: 3.14,name:t('message.ProductMap.list68') },
    { lng:   -74.00, lat: 40.71,name:t('message.ProductMap.list69') },
    { lng: 	-118.24, lat: 34.07,name:t('message.ProductMap.list70') },
    { lng:  -77.03 , lat: 38.90,name:t('message.ProductMap.list71') },
    { lng:  -122.41, lat: 37.76,name:t('message.ProductMap.list72') },
    { lng:  -87.64 , lat: 41.87,name:t('message.ProductMap.list73') },
    { lng: 	-95.39 , lat: 29.76,name:t('message.ProductMap.list74') },
    { lng: 103.87  , lat: 1.35,name:t('message.ProductMap.list75')},
    { lng: -0.13   , lat: 51.51,name:t('message.ProductMap.list76') },
    { lng: 151.20  , lat: -33.87,name:t('message.ProductMap.list77') },
    { lng: 144.94  , lat: -37.80,name:t('message.ProductMap.list78') },
    { lng: -79.38  , lat: 43.66,name:t('message.ProductMap.list79') },
    { lng: 2.35    , lat: 48.85,name:t('message.ProductMap.list80')},
    { lng: 55.36   , lat: 25.27,name:t('message.ProductMap.list81')},
    { lng: 139.76  , lat: 35.70,name:t('message.ProductMap.list82')},
    { lng: 126.99  , lat: 37.55,name:t('message.ProductMap.list83')},
    { lng: 13.39   , lat: 52.52,name:t('message.ProductMap.list84')},
    { lng: 12.49   , lat: 41.90,name:t('message.ProductMap.list85')},
    { lng:  9.18   , lat: 45.46,name:t('message.ProductMap.list86')},
  ]
})
// const getNewPoints = computed(() => {
//   return getPoints()
// })
watch(
  locale,() => {
    console.log('111=')
    getPoints()
  }
)
const getPoints = () => {
  let mapId = 4
  if (id.value == 1){
    mapId = 5
  }
  setTimeout(() => {
    productMapV.value = new window.BMap.Map('productMapV') // 创建地图实例

    productMapV.value.setMapStyle({styleJson: [ //地图隐藏默认城市名
        {
          "featureType": "district",
          "elementType": "all",
          "stylers": {
            "visibility": "off",
          }
        },
        {
          "featureType": "town",
          "elementType": "all",
          "stylers": {
            "visibility": "off",
          }
        },
        {
          "featureType": "village",
          "elementType": "all",
          "stylers": {
            "visibility": "off",
          }
        },
        {
          "featureType": "city",
          "elementType": "all",
          "stylers": {
            "visibility": "off",
            // "lightness": 10,
            // "saturation": -100
          }
        }
      ]})
    // productMapV.clearOverlays(); // 清除覆盖物
    // var point = new BMap.Point(113.92089769405693, 22.51942636366546) // 创建点坐标
    productMapV.value.centerAndZoom(new window.BMap.Point(points.value[0].lng, points.value[0].lat), mapId) // 初始化地图，设置中心点坐标和地图级别
    productMapV.value.enableScrollWheelZoom(true) //开启鼠标滚轮缩放
    points.value.forEach((point) => {
      // const myIcon = new window.BMap.Icon(homeMap, new window.BMap.Size(23, 25))
      const myIcon = new window.BMap.Icon(homeMap, new window.BMap.Size(23, 25),{
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标中央下端的尖角位置。
        anchor: new window.BMap.Size(23, 25),
        // 设置图片偏移。
        // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
        // 需要指定大图的偏移位置，此做法与css sprites技术类似。
        imageOffset: new window.BMap.Size(-3,  -1)   // 设置图片偏移
      })

      // const myIcon = new productBMap.Icon(homeMap, new productBMap.Size(23, 25), {
      //   // 指定定位位置。
      //   // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      //   // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      //   // 图标中央下端的尖角位置。
      //   anchor: new productBMap.Size(10, 25),
      //   // 设置图片偏移。
      //   // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
      //   // 需要指定大图的偏移位置，此做法与css sprites技术类似。
      //   imageOffset: new productBMap.Size(0, 0 - 25)   // 设置图片偏移
      // })
      myIcon.setImageSize(new window.BMap.Size(23, 25));
      const bPoint = new window.BMap.Point(point.lng, point.lat); // 创建点
      const marker = new window.BMap.Marker(bPoint,{icon:myIcon}); // 做标记

      productMapV.value.addOverlay(marker); // 在地图上显示标注点
      const label = new window.BMap.Label(point.name, { offset: new window.BMap.Size(9, 4) });
      label.setStyle({ // 设置文本标注样式
        marginLeft:'7px',
        fontWeight: 600,
        fontSize: '15px',
        color: '#375fff',
        backgroundColor: '0',
        border: 0,
      });
      marker.setLabel(label);
      // markers.value.push(marker);

      // // 点击标注监听事件
      // marker.addEventListener("click", function (e) {
      //   alert("您点击了标注");
      //   console.log(e, 888888888);
      // });
    })
    // var marker = new productBMap.Marker(point) // 创建标注
    // map.addOverlay(marker) // 将标注添加到地图中
    // let productWow = new WOW()
    // productWow.init()
  })
}
let productBMap = null
const productMapV = ref(null)
onMounted(() => {
  sessionStorage.setItem('navIndex', '0')
  sessionStorage.setItem('productMap', '1')
  id.value = router.currentRoute.value.query.id

  getPoints()

  console.log(homeMap,'homeMap--')
  // productBMap = window.BMap

})
onUnmounted(() => {
  productBMap = null; // 销毁地图实例
});
</script>

<style scoped>
#productMap{
  background: url("https://image.fulllinkai.com/202309/07/348a87abc5f0870ed4d0e6085fd032fb.png") no-repeat center;
}
.ui-productMap-box{
  width: 100%;
  height: 1080px;
}
#productMapV{
  width: 100%;
  height: 100%;
}
</style>