fixed use icon pin in assets

src/assets/markers/marker-blue.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7Z" fill="#1E88E5"/>
+  <circle cx="12" cy="9" r="3" fill="#fff"/>
+</svg>

src/assets/markers/marker-red.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none">
+  <path d="M12 2c-3.866 0-7 3.134-7 7 0 5.25 7 13 7 13s7-7.75 7-13c0-3.866-3.134-7-7-7Z" fill="#E53935"/>
+  <circle cx="12" cy="9" r="3" fill="#fff"/>
+</svg>

src/components/AscGISMap.vue

@@ -13,6 +13,8 @@ import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
 import { useQuasar } from 'quasar'
 import { usePrivacyStore } from '@/stores/privacy'
+import markerRedUrl from '@/assets/markers/marker-red.svg?url'
+import markerBlueUrl from '@/assets/markers/marker-blue.svg?url'
 
 const mixin = useCounterMixin()
 const { messageError } = mixin
@@ -275,7 +277,7 @@ async function initializeMap() {
     const userPoint = new Point({ longitude, latitude })
     const userSymbol = {
       type: 'picture-marker',
-      url: 'http://maps.google.com/mapfiles/ms/icons/red.png',
+      url: markerRedUrl,
       width: '32px',
       height: '32px',
     }
@@ -315,7 +317,7 @@ async function initializeMap() {
     //     })
     //     const poiSymbol = {
     //       type: 'picture-marker',
-    //       url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+    //       url: markerBlueUrl,
     //       width: '32px',
     //       height: '32px',
     //     }
@@ -371,7 +373,7 @@ async function initializeMap() {
         })
         const poiSymbol = {
           type: 'picture-marker',
-          url: 'http://maps.google.com/mapfiles/ms/icons/blue.png',
+          url: markerBlueUrl,
           width: '32px',
           height: '32px',
         }

src/components/AscGISMapTime.vue

@@ -2,6 +2,7 @@
 import { nextTick, onBeforeUnmount, onMounted, shallowRef, ref } from 'vue'
 import { loadModules } from 'esri-loader'
 import axios from 'axios'
+import markerRedUrl from '@/assets/markers/marker-red.svg?url'
 
 const emit = defineEmits(['update:location'])
 
@@ -140,7 +141,7 @@ async function initializeMap() {
 
           // สร้างสัญลักษณ์ของหมุด
           const markerSymbol = new PictureMarkerSymbol({
-            url: 'https://maps.google.com/mapfiles/ms/icons/red-dot.png', // รูปหมุด
+            url: markerRedUrl,
             width: '32px',
             height: '32px',
           })

vite.config.js

@@ -23,7 +23,7 @@ export default defineConfig({
         cleanupOutdatedCaches: true,
         globPatterns: ['**/*.*'],
       },
-      includeAssets: ['icons/safari-pinned-tab.svg'],
+      includeAssets: ['icons/safari-pinned-tab.svg', 'src/assets/markers/*.svg'],
       manifest: {
         name: 'HRMS-Checkin',
         short_name: 'HRMS Checkin',