feat: add map view

package.json

@@ -37,6 +37,7 @@
     "@vue/runtime-core": "^3.2.26",
     "@vue/shared": "^3.2.26",
     "@vueuse/core": "^7.4.1",
+    "@vueuse/router": "^11.0.0",
     "@vueuse/shared": "^7.4.1",
     "@zxcvbn-ts/core": "^1.2.0",
     "ant-design-vue": "3.2.20",
@@ -67,6 +68,7 @@
     "vue-json-pretty": "^1.8.2",
     "vue-router": "^4.0.12",
     "vue-types": "^4.1.1",
+    "vue3-google-map": "^0.21.0",
     "xlsx": "^0.17.4"
   },
   "devDependencies": {

src/locales/lang/json/zh-CN.json

@@ -454,6 +454,7 @@
     "routes.dashboard.archive": "归档管理",
     "routes.dashboard.archiveList": "归档列表",
     "routes.dashboard.contractorManage": "承包商管理",
+    "routes.dashboard.map": "地图",
     "routes.devices.add": "新增",
     "routes.devices.title": "员工账号",
     "routes.devices.addBut": "新增员工账号",

src/router/routes/index.ts

@@ -58,9 +58,19 @@ export const WelcomeRoute: AppRouteRecordRaw = {
   ],
 };
 
+export const MapRoute: AppRouteRecordRaw = {
+  path: '/map',
+  name: 'Map',
+  component: () => import('/@/views/map/index.vue'),
+  meta: {
+    title: t('routes.dashboard.map'),
+  },
+};
+
 // Basic routing without permission
 export const basicRoutes = [
   LoginRoute,
+  MapRoute,
   WelcomeRoute,
   RootRoute,
   ...mainOutRoutes,

src/router/routes/modules/map.ts.bk

@@ -0,0 +1,33 @@
+import type { AppRouteModule } from '/@/router/types';
+import { RoleEnum } from '/@/enums/roleEnum';
+import { LAYOUT } from '/@/router/constant';
+import { t } from '/@/hooks/web/useI18n';
+
+const map: AppRouteModule = {
+  path: '/map',
+  name: 'Map',
+  component: LAYOUT,
+  redirect: '/map/index',
+  hidden: true,
+  meta: {
+    hideChildrenInMenu: true,
+    icon: 'medical-icon:care-staff-area',
+    title: t('routes.dashboard.map'),
+    orderNo: 102,
+    roles: [RoleEnum.SUPER, RoleEnum.PLAT_ADMIN, RoleEnum.COMPANY_ADMIN],
+  },
+  children: [
+    {
+      path: 'index',
+      name: 'mapIndex',
+      component: () => import('/@/views/map/index.vue'),
+      meta: {
+        title: t('routes.dashboard.map'),
+        icon: 'ic:outline-remember-me',
+        roles: [RoleEnum.SUPER, RoleEnum.PLAT_ADMIN, RoleEnum.COMPANY_ADMIN],
+      },
+    },
+  ],
+};
+
+export default map;

src/views/map/index.vue

@@ -0,0 +1,244 @@
+<template>
+  <GoogleMap
+    ref="mapRef"
+    :center="center"
+    api-key="AIzaSyBGUvCR1bppO9pfuS0MUWzuftiZ127y4Os"
+    mapId="DEMO_MAP_ID"
+    :map-type-control="true"
+    :disable-default-ui="false"
+    :language="lang"
+    region="JP"
+    :zoom="7"
+    map-type-id="roadmap"
+    style="width: 100vw; height: 100vh"
+    @click="handleMapClick"
+    v-loading="loadingRef"
+    :loading-tip="t('common.loadingText')"
+  >
+    <MarkerCluster>
+      <AdvancedMarker
+        v-for="(location, i) in locations"
+        :key="i"
+        :options="{ position: location }"
+        @click="handleMarkerClick"
+      >
+        <InfoWindow>
+          <div id="content">
+            <div id="siteNotice"></div>
+            <h1 id="firstHeading" class="firstHeading">testtest</h1>
+            <div id="bodyContent">
+              <p>
+                <b>Uluru</b>, {{ location }} also referred to as <b>Ayers Rock</b>, is a large
+                sandstone rock formation in the southern part of the Northern Territory, central
+                Australia. It lies 335&#160;km (208&#160;mi) south west of the nearest large town,
+                Alice Springs; 450&#160;km (280&#160;mi) by road. Kata Tjuta and Uluru are the two
+                major features of the Uluru - Kata Tjuta National Park. Uluru is sacred to the
+                Pitjantjatjara and Yankunytjatjara, the Aboriginal people of the area. It has many
+                springs, waterholes, rock caves and ancient paintings. Uluru is listed as a World
+                Heritage Site.
+              </p>
+              <p>
+                Attribution: Uluru,
+                <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">
+                  https://en.wikipedia.org/w/index.php?title=Uluru</a
+                >
+                (last visited June 22, 2009).
+              </p>
+            </div>
+          </div>
+        </InfoWindow>
+      </AdvancedMarker>
+    </MarkerCluster>
+
+    <CustomControl position="BOTTOM_CENTER">
+      <button class="custom-btn">👋</button>
+    </CustomControl>
+
+    <CustomControl position="LEFT_CENTER">
+      <button class="custom-btn">👋</button>
+    </CustomControl>
+  </GoogleMap>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, watch } from 'vue';
+  import {
+    GoogleMap,
+    AdvancedMarker,
+    MarkerCluster,
+    InfoWindow,
+    CustomControl,
+  } from 'vue3-google-map';
+  import { useRouteQuery } from '@vueuse/router';
+  // import { Loading } from '/@/components/Loading';
+  import { all } from './test';
+  const loadingRef = ref(true);
+  import { useI18n } from '/@/hooks/web/useI18n';
+  const { t } = useI18n();
+  // const center = { lat: 40.689247, lng: -74.044502 };
+  // const markerOptions = { position: center, label: "L", title: "LADY LIBERTY" };
+  // const pinOptions = { background: "#FBBC04" };
+  const center = { lat: 35.717, lng: 139.731 };
+  // const pinOptions = { background: '#FBBC04' };
+  const lang = useRouteQuery('lang', 'ja');
+  // console.log('lang', lang);
+
+  const mapRef = ref();
+
+  const locations = ref([
+    { lat: 35.717, lng: 139.731 },
+    { lat: 35.717222, lng: 139.199731 },
+    { lat: 35.717222, lng: 139.199731 },
+    { lat: 35.717222, lng: 139.199731 },
+    { lat: 35.417222, lng: 139.192731 },
+    { lat: 35.717222, lng: 139.199731 },
+    { lat: 35.717222, lng: 139.199731 },
+    { lat: 34.717222, lng: 139.27819 },
+
+    { lat: 36.31296720118859, lng: 139.3926063119922 },
+    { lat: 35.62235838888284, lng: 139.71015593805745 },
+    { lat: 35.86823489038979, lng: 140.14478176589813 },
+    { lat: 35.666319244178254, lng: 139.68656650039 },
+    { lat: 35.66210809403935, lng: 139.69871520996094 },
+    { lat: 35.6555101891923, lng: 139.6854507014398 },
+    { lat: 35.65383639825058, lng: 139.67137446852965 },
+    { lat: 35.63160781942685, lng: 139.69101567233477 },
+    { lat: 35.6370693778054, lng: 139.7189712524414 },
+    { lat: 35.6370693778054, lng: 139.7189712524414 },
+    { lat: 35.63368820266599, lng: 139.69704879782842 },
+    { lat: 35.671210059759105, lng: 139.78837265036748 },
+    { lat: 35.67953081677376, lng: 139.81919354352647 },
+    { lat: 35.71480112339862, lng: 139.84185284528428 },
+    { lat: 35.689848647011665, lng: 139.86931866559678 },
+    { lat: 35.6370835731761, lng: 139.73909710131483 },
+    { lat: 35.64524468393014, lng: 139.7480234929164 },
+    { lat: 35.62850304525592, lng: 139.74750850878553 },
+    { lat: 35.65654330733842, lng: 139.73094318590955 },
+    { lat: 35.25333139421992, lng: 140.1328670531019 },
+    { lat: 35.520945427155084, lng: 139.70861514045217 },
+    { lat: 35.52835001979981, lng: 139.72466547919728 },
+    { lat: 35.53219175620018, lng: 139.72543795539357 },
+    { lat: 36.06471592950127, lng: 139.56015044311627 },
+    { lat: 35.99663544599227, lng: 139.51716429913103 },
+
+    { lat: 36.00330154326686, lng: 139.73277098858415 },
+    { lat: 34.85159530859275, lng: 135.79240136718747 },
+
+    { lat: 33.39618823869116, lng: 130.68578108352963 },
+    { lat: 32.90613073777195, lng: 131.45866324766476 },
+    { lat: 31.571382620455626, lng: 131.29605440525106 },
+    { lat: 43.484211753270436, lng: 143.19908481320442 },
+
+    { lat: 43.04453309951811, lng: 141.92720114193736 },
+    { lat: 43.70103868045711, lng: 143.26774936398567 },
+    { lat: 39.59910275038968, lng: 140.79112971490326 },
+    { lat: 39.038147596858046, lng: 141.42833674615326 },
+
+    { lat: 39.852593533335906, lng: 141.58214533990326 },
+    { lat: 39.40536603650614, lng: 141.81934919778516 },
+    { lat: 37.280345063819624, lng: 140.40488676127148 },
+    { lat: 37.650945729111164, lng: 140.66306547220898 },
+
+    { lat: 26.2115166886031, lng: 127.75279725182631 },
+    { lat: 44.34833983328789, lng: 143.34691816315754 },
+    { lat: 43.00128806366339, lng: 144.3869447551281 },
+    { lat: 28.192627956555494, lng: 129.313005376943 },
+    { lat: 28.259479947389917, lng: 129.36450379002895 },
+
+    { lat: 38.735843285553415, lng: 140.10460862452084 },
+    { lat: 39.23754027286606, lng: 140.19249924952084 },
+
+    { lat: 36.552075508234424, lng: 136.70281355238654 },
+    { lat: 36.28575067992493, lng: 136.49407331801154 },
+
+    { lat: 36.22987124498562, lng: 137.90955145716998 },
+    { lat: 35.8122427890604, lng: 137.86835272670123 },
+
+    { lat: 37.57569302701527, lng: 139.43412377785248 },
+    { lat: 37.18502777318644, lng: 138.82987573097748 },
+
+    { lat: 37.10846065439149, lng: 138.6381507062294 },
+    { lat: 37.106817847812714, lng: 138.68896247380752 },
+    { lat: 37.11502932699901, lng: 138.62138419322386 },
+    { lat: 37.1148924396862, lng: 138.67133765391722 },
+    { lat: 37.07600642884621, lng: 138.64267020396605 },
+    // eslint-disable-next-line @typescript-eslint/no-loss-of-precision
+    { lat: 35.43717666390691, lng: 139.45083618164062 },
+    { lat: 35.45060223946404, lng: 139.53495025634766 },
+    { lat: 35.38645461274881, lng: 139.44146351130624 },
+    { lat: 35.39750986273954, lng: 139.49442104609628 },
+    { lat: 35.40366656004627, lng: 139.49115947993417 },
+    { lat: 34.85417907268749, lng: 136.55081855570842 },
+  ]);
+
+  locations.value = locations.value.concat(all);
+  console.log('total', locations.value.length);
+
+  watch(
+    () => mapRef.value?.ready,
+    (ready) => {
+      if (!ready) return;
+      console.log('ready', ready);
+      loadingRef.value = false;
+      mapFitBounds(mapRef, locations.value);
+    },
+    {
+      deep: true,
+    },
+  );
+  onMounted(() => {
+    var x = 39.67560286578145,
+      y = 141.1263322240219;
+    // lat: 39.67560286578145, lng: 141.1263322240219
+    const list = [];
+
+    for (let i = 0; i < 1000; i++) {
+      var plusOrMinus = Math.random() < 0.5 ? -1 : 1;
+      if (plusOrMinus > 0) {
+        x += Math.random() * 0.007;
+        y += Math.random() * 0.007;
+      } else {
+        x -= Math.random() * 0.007;
+        y -= Math.random() * 0.007;
+      }
+
+      const item = { lat: x, lng: y };
+      list.push(item);
+    }
+    // console.log(JSON.stringify(list));
+  });
+
+  function mapFitBounds(mapRef, markers) {
+    let bounds;
+    const api = mapRef.value.api;
+    const map = mapRef.value.map;
+
+    bounds = new api.LatLngBounds();
+    for (let i = 0; i < markers.length; i++) {
+      bounds.extend(markers[i]);
+    }
+    map.fitBounds(bounds);
+    map.panToBounds(bounds);
+  }
+  const handleMapClick = (event) => {
+    const { lat, lng } = event.latLng;
+    console.log('event', `{ lat: ${lat()}, lng: ${lng()}}`);
+  };
+
+  const handleMarkerClick = (event) => {
+    const { lat, lng } = event.latLng;
+    console.log('handleMarkerClick', lat(), lng());
+    // infowindow.value = true;
+    // infowindowPosition.value.lat = lat();
+    // infowindowPosition.value.lng = lng();
+  };
+  // const render = ({ count, position }) => {
+  //   console.log('count', count, position);
+  // };
+</script>
+<style>
+  #map-container {
+    width: 100vw;
+    height: 100vh;
+  }
+</style>

src/views/map/index2.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="p-4">
+    <div>xxxx</div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  export default defineComponent({
+    components: {},
+    setup() {},
+  });
+</script>
+<style></style>