fix build

import { defineClientConfig } from '@vuepress/client'

import BusTable from "./components/BusTable.vue";

import TabView from "./components/TabView.vue";

import Realtimemap from './components/Realtime-map.vue'

import RealtimeMap from './components/RealtimeMap.vue'

import WeatherSpan from './components/weather-span.vue'

import BusChartVue from './components/BusChartVue.vue'

// import AdsenseUnit from './components/adsense-inline-article.vue'

  enhance({ app }) {

    app.component("BusTable", BusTable)

    app.component("TabView", TabView)

    app.component("Realtimemap", Realtimemap)

    app.component("RealtimeMap", RealtimeMap)

    app.component("WeatherSpan", WeatherSpan)

    app.component("BusChartVue", BusChartVue)

    // app.component("AdsenseUnit", AdsenseUnit)

<template>

  <div class="map-container" ref="myMap"></div>

  <span>Time drift: {{ time_difference }} sec.</span>

  <!--  <div id="map-style-menu">-->

<script>

import maplibre from 'maplibre-gl';

import axios from "axios";

import { onMounted, onUnmounted } from 'vue';

export default {

    timer: {}

  }),

  async created() {

    //fetch bus location (current no need)

    // const realtime_location_api_data = await axios.get(`https://bus.sustcra.com/api/v1/bus/monitor_osm/`)

    // this.bus_location_data_api = realtime_location_api_data.data;

    // console.log("fetch complete")

  setup() {

    onMounted(async () => {

      // fetch geojson

    const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`)

      const bldg_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_bldg.json`);

      this.bldg_geojson = bldg_geojson.data;

    const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`)

      const gate_geojson = await axios.get(`https://bus.sustcra.com/geojson/sustech_gate.json`);

      this.gate_geojson = gate_geojson.data;

    console.log("Fetch geojson of sustech complete")

  },

      console.log("Fetch geojson of sustech complete");

      await this.build_map_onmount();

    });

    onUnmounted(async () => {

      clearInterval(this.timer);

    });

  },

  //update data

  methods: {

      }

      this.update_location()

    },

    update_location: function () {

    update_location() {

      this.display_data = [];

      this.bus_marker_arr.forEach((marker) => marker.remove())

      let i;

    async refresh() {

      await this.fetch_bus();

    },

  },

  async mounted() {

    async build_map_onmount() {

      const initialState = {

        lng: 113.99373,

        lat: 22.60308,

      this.timer = setInterval(() => {

        this.refresh();

      }, 5000);

    },

  async unmounted() {

    clearInterval(this.timer);

  }

  },

};

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style src="maplibre-gl/dist/maplibre-gl.css">

</style>

<style src="maplibre-gl/dist/maplibre-gl.css"></style>

<style scoped>

/* @import 'https://code.bdstatic.com/npm/maplibre-gl@1.15.2/dist/maplibre-gl.css'; */

/* @import 'maplibre-gl/dist/maplibre-gl.css'; */

  content: '✔';

  margin-right: 5px;

}

</style>

    onMounted(async () => {

      const { Tabs } = await import('ant-design-vue');

      const { TabPane } = Tabs;

      const RealtimeMap = await import('./Realtime-map.vue');

      const RealtimeMap = await import('./RealtimeMap.vue');

      const BusChartVue = await import('./BusChartVue.vue');

      const BusTable = await import('./BusTable.vue');

位置每5秒自动刷新。Location refreshes automatically every 5 seconds

<Realtimemap/>

<RealtimeMap/>

<BusChartVue/>