|
@@ -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]));
|
|
|
|