bill 1 неделя назад
Родитель
Сommit
fed5db9cfe

+ 18 - 2
src/example/dialog/basemap/leaflet/index.vue

@@ -17,6 +17,13 @@
           </el-select>
         </template>
       </el-input>
+
+      <div class="result" v-if="mark || mark === null">
+        <template v-if="mark">
+          <h3>经纬度定位成功</h3>
+          <p>精度</p>
+        </template>
+      </div>
     </div>
     <div class="map" ref="mapEle">
       <div class="tiles-select">
@@ -40,7 +47,7 @@
 
 <script lang="ts" setup>
 import { computed, ref, shallowRef, watch, watchEffect } from "vue";
-import { useLMap, useSetLTileLayers } from "./useLeaflet";
+import { isValidLatLng, useLMap, useSetLTileLayers } from "./useLeaflet";
 import { BasemapInfo, SelectMapImageProps } from "../index";
 import html2canvas from "html2canvas";
 import {
@@ -94,9 +101,18 @@ const keyword = ref({
   latlng: "",
   name: "",
 });
+const mark = ref<{ lat: number; lng: number } | null>();
 
 const search = (type: "latlng" | "name", keyword: string) => {
-  // if (keyword)
+  mark.value = undefined;
+  if (type === "latlng") {
+    const [lng, lat] = keyword.split(",").map((s) => Number(s.trim()));
+    if (!isValidLatLng(lat, lng)) {
+      mark.value = null;
+    } else {
+      mark.value = { lat, lng };
+    }
+  }
 };
 watch([searchType, keyword], ([type, keyword]) => search(type, keyword[type]));
 

+ 13 - 0
src/example/dialog/basemap/leaflet/useLeaflet.ts

@@ -81,3 +81,16 @@ export const useSetLTileLayers = (lMap: Ref<Map | undefined>) => {
     );
   };
 };
+
+export function isValidLatLng(lat: number, lng: number) {
+  return (
+    typeof lat === 'number' && 
+    typeof lng === 'number' &&
+    !isNaN(lat) && 
+    !isNaN(lng) &&
+    lat >= -90 && 
+    lat <= 90 &&
+    lng >= -180 && 
+    lng <= 180
+  );
+}