|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="search-layout">
|
|
|
<el-input
|
|
|
v-model="keyword"
|
|
|
- placeholder="输入名称搜索"
|
|
|
+ :placeholder="$t('sceneHome.nameSearch')"
|
|
|
style="width: 350px"
|
|
|
clearable
|
|
|
@change="onSearch"
|
|
|
@@ -16,9 +16,9 @@
|
|
|
<div
|
|
|
class="search-list"
|
|
|
v-for="(item, index) in keywordList"
|
|
|
- @click="hanleItem(item.name)"
|
|
|
+ @click="hanleItem(item)"
|
|
|
>
|
|
|
- {{ item.name }}
|
|
|
+ {{ item.name||item.formatted_address }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- <div class="search-sh" v-show="keyword">
|
|
|
@@ -33,8 +33,8 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="def-map-info" v-if="searchInfo">
|
|
|
- <p><span>纬度</span>{{ searchInfo.lat }}</p>
|
|
|
- <p><span>经度</span>{{ searchInfo.lng }}</p>
|
|
|
+ <p><span>{{$t('coord.lat')}}</span>{{ searchInfo.lat }}</p>
|
|
|
+ <p><span>{{$t('coord.lng')}}</span>{{ searchInfo.lng }}</p>
|
|
|
<!-- <p><span>缩放级别</span>{{ info.zoom }}</p> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -46,10 +46,12 @@ import { wgs84_to_gcj02 } from "./map";
|
|
|
import { getTipsList, getGaoDeGaoDeList, getTipsNames, getCaseInfo } from "@/store/case";
|
|
|
import { ref, watchEffect, onMounted, computed } from "vue";
|
|
|
import { QuiskExpose } from "@/helper/mount";
|
|
|
+import { ElMessage, ElMessageBox, genFileId } from "element-plus";
|
|
|
+import { ui18n } from "@/i18n";
|
|
|
import { debounce } from "@/util";
|
|
|
import html2canvas from "html2canvas";
|
|
|
import L from "leaflet";
|
|
|
-import "leaflet.chinatmsproviders";
|
|
|
+import "./leaflet.ChineseTmsProviders.js";
|
|
|
import "leaflet/dist/leaflet.css";
|
|
|
import { router } from "@/router";
|
|
|
export type MapImage = { blob: Blob | null; search: MapInfo | null };
|
|
|
@@ -73,8 +75,8 @@ var Gaode = L.tileLayer.chinaProvider("GaoDe.Normal.Map", {
|
|
|
minZoom: 5,
|
|
|
});
|
|
|
var baseLayers = {
|
|
|
- '谷歌地图': normalMap,
|
|
|
- '高德地图': Gaode,
|
|
|
+ [ui18n.t("coord.edit.ggmap")]: normalMap,
|
|
|
+ [ui18n.t("coord.edit.gmap")]: Gaode,
|
|
|
};
|
|
|
|
|
|
let map: any = {};
|
|
|
@@ -98,7 +100,7 @@ const caseId = computed(() => {
|
|
|
}
|
|
|
});
|
|
|
onMounted(async () => {
|
|
|
- caseInfoData.value = {};
|
|
|
+ caseInfoData.value = await getCaseInfo(caseId.value);
|
|
|
let center = [22.61, 113.05];
|
|
|
if (caseInfoData.value?.latAndLong) {
|
|
|
center = caseInfoData.value.latAndLong.split(",");
|
|
|
@@ -174,21 +176,41 @@ const getMapInfo = (): MapInfo => {
|
|
|
};
|
|
|
const onSearch = (val) => {
|
|
|
getGaoDeGaoDeList(val).then((res) => {
|
|
|
- console.log("getTipsList", res);
|
|
|
- keywordList.value = res.data;
|
|
|
+ let data = res.data && JSON.parse(res.data);
|
|
|
+ keywordList.value = data.geocodes;
|
|
|
+ keyword.value = val;
|
|
|
+ console.log("getTipsList",data, keywordList.value, keyword.value);
|
|
|
+ // if(data && data.geocodes && data.geocodes.length > 0) {
|
|
|
+ // let item = data.geocodes[0].location.split(",");
|
|
|
+ // console.log("item", item);
|
|
|
+
|
|
|
+ // // 在地图上添加标记
|
|
|
+ // clickMarker = L.marker([item[1], item[0]], {
|
|
|
+ // position: [item[1], item[0]],
|
|
|
+ // title: "点击位置",
|
|
|
+ // // icon,
|
|
|
+ // });
|
|
|
+ // clickMarker.addTo(map);
|
|
|
+ // map.panTo([item[1], item[0]]);
|
|
|
+ // }
|
|
|
+ }).catch((err) => {
|
|
|
+ ElMessage.error(ui18n.t("err.disconnect"));
|
|
|
});
|
|
|
console.log("onSearch", val, "keyword.value", keyword.value);
|
|
|
};
|
|
|
-const hanleItem = (name) => {
|
|
|
- // keyword.value = item.name;
|
|
|
- getTipsNames(name).then((ress) => {
|
|
|
- let res = ress.data;
|
|
|
- // longlat = wgs84_to_gcj02(Number(res.lng),Number(res.lat))
|
|
|
- keyword.value = "";
|
|
|
+const hanleItem = async (item) => {
|
|
|
+ let res = item
|
|
|
+ if(item.location) {
|
|
|
+ res.lng = item.location.split(",")[0];
|
|
|
+ res.lat = item.location.split(",")[1];
|
|
|
+ res.name = item.formatted_address
|
|
|
+ }else{
|
|
|
+ let ress = await getTipsNames(item.name);
|
|
|
+ res = ress.data;
|
|
|
+ }
|
|
|
+ keyword.value = "";
|
|
|
searchInfo.value = {
|
|
|
...res,
|
|
|
- // lng: longlat[0],
|
|
|
- // lat: longlat[1],
|
|
|
text: res.name,
|
|
|
};
|
|
|
clickMarker && clickMarker.remove();
|
|
|
@@ -207,7 +229,12 @@ const hanleItem = (name) => {
|
|
|
});
|
|
|
clickMarker.addTo(map);
|
|
|
map.panTo([res.lat, res.lng]);
|
|
|
- });
|
|
|
+ // keyword.value = item.name;
|
|
|
+ // getTipsNames(name).then((ress) => {
|
|
|
+ // let res = ress.data;
|
|
|
+ // // longlat = wgs84_to_gcj02(Number(res.lng),Number(res.lat))
|
|
|
+
|
|
|
+ // });
|
|
|
// onSearch(item.name);
|
|
|
};
|
|
|
var dataURLtoBlob = function (dataurl) {
|
|
|
@@ -279,7 +306,7 @@ defineExpose<QuiskExpose>({
|
|
|
overflow-y: auto;
|
|
|
}
|
|
|
.search-list {
|
|
|
- background: #fff;
|
|
|
+ background: #1B1B1C;
|
|
|
padding-left: 10px;
|
|
|
line-height: 36px;
|
|
|
}
|
