|
|
@@ -47,7 +47,7 @@
|
|
|
</template>
|
|
|
</MarkerCluster>
|
|
|
|
|
|
- <CustomControl position="TOP_LEFT">
|
|
|
+ <!-- <CustomControl position="TOP_LEFT">
|
|
|
<div class="top_left_control">
|
|
|
<div>
|
|
|
<ApiSelect
|
|
|
@@ -67,6 +67,7 @@
|
|
|
style="width: 300px"
|
|
|
:params="{
|
|
|
type: 0,
|
|
|
+ ciphertext: ciphertext,
|
|
|
projectId: projectId,
|
|
|
searchKey: form.searchValue,
|
|
|
}"
|
|
|
@@ -101,10 +102,10 @@
|
|
|
</Select>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </CustomControl>
|
|
|
-
|
|
|
+ </CustomControl> -->
|
|
|
+ <!--
|
|
|
<CustomControl position="BOTTOM_CENTER">
|
|
|
- <div class="share-container">
|
|
|
+ <div class="share-container" >
|
|
|
<Popover trigger="click" v-model:open="shareOpen">
|
|
|
<template #content>
|
|
|
<div class="share-content">
|
|
|
@@ -113,11 +114,10 @@
|
|
|
<a-button text @click="handleCopy">复制链接</a-button>
|
|
|
</div>
|
|
|
</template>
|
|
|
- <!-- <a-button type="primary">Hover me</a-button> -->
|
|
|
<a-button class="custom-btn" @click="handleShare">分享</a-button>
|
|
|
</Popover>
|
|
|
</div>
|
|
|
- </CustomControl>
|
|
|
+ </CustomControl> -->
|
|
|
</GoogleMap>
|
|
|
</template>
|
|
|
|
|
|
@@ -130,32 +130,29 @@
|
|
|
MarkerCluster,
|
|
|
CustomMarker,
|
|
|
// InfoWindow,
|
|
|
- CustomControl,
|
|
|
+ // CustomControl,
|
|
|
} from 'vue3-google-map';
|
|
|
import { useRouteQuery } from '@vueuse/router';
|
|
|
- import { Select, SelectOption, Popover } from 'ant-design-vue';
|
|
|
- import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
|
|
- import { useRouter } from 'vue-router';
|
|
|
+ // import { Select, SelectOption, Popover } from 'ant-design-vue';
|
|
|
+ // import ApiSelect from '/@/components/Form/src/components/ApiSelect.vue';
|
|
|
+ // import { useRouter } from 'vue-router';
|
|
|
const loadingRef = ref(true);
|
|
|
import { useI18n } from '/@/hooks/web/useI18n';
|
|
|
- import { AllGpsApi, CreateShareMapApi } from '/@/api/mapOpt/list';
|
|
|
- import { QrCode } from '/@/components/Qrcode/index';
|
|
|
- import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
|
|
- import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
+ import { GetShareMapApi } from '/@/api/mapOpt/list';
|
|
|
+ // import { QrCode } from '/@/components/Qrcode/index';
|
|
|
+ // import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
|
|
|
+ // import { useMessage } from '/@/hooks/web/useMessage';
|
|
|
|
|
|
const { t } = useI18n();
|
|
|
- const router = useRouter();
|
|
|
+ // const router = useRouter();
|
|
|
const googleKey = computed(() => import.meta.env.VITE_GOOGLE_KEY);
|
|
|
const center = { lat: 35.717, lng: 139.731 };
|
|
|
- const { createMessage } = useMessage();
|
|
|
- // const options = ref([]);
|
|
|
- // const pinOptions = { background: '#FBBC04' };
|
|
|
- const shareOpen = ref(false);
|
|
|
- const qrCodeShareUrl = ref('');
|
|
|
- const { clipboardRef, isSuccessRef } = useCopyToClipboard(qrCodeShareUrl.value);
|
|
|
+ // const { createMessage } = useMessage();
|
|
|
+
|
|
|
const lang = useRouteQuery('lang', 'ja');
|
|
|
- const projectId = useRouteQuery('projectId');
|
|
|
+
|
|
|
const type = useRouteQuery('type', 0);
|
|
|
+ const ciphertext = useRouteQuery('ciphertext');
|
|
|
const form = ref<{
|
|
|
searchValue: null | string;
|
|
|
projectValue: null | string;
|
|
|
@@ -197,24 +194,16 @@
|
|
|
);
|
|
|
|
|
|
onMounted(async () => {
|
|
|
- watchEffect(() => {
|
|
|
- console.log(projectId.value);
|
|
|
- if (projectId.value) {
|
|
|
- form.value.projectValue = String(projectId.value);
|
|
|
- }
|
|
|
- if (type.value) {
|
|
|
- form.value.type = Number(type.value);
|
|
|
+ watchEffect(async () => {
|
|
|
+ if (type.value && ciphertext.value) {
|
|
|
+ await sceneFetch({
|
|
|
+ type: type.value,
|
|
|
+ ciphertext: ciphertext.value,
|
|
|
+ });
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
- function reloadWithParams() {
|
|
|
- console.log('reloadWithParams');
|
|
|
- const routeData = router.resolve({ name: 'Map', query: { type: form.value.type } });
|
|
|
- location.replace(routeData.href);
|
|
|
- location.reload();
|
|
|
- }
|
|
|
-
|
|
|
function mapFitBounds(mapRef, markers) {
|
|
|
let bounds;
|
|
|
const api = mapRef.value.api;
|
|
|
@@ -237,23 +226,6 @@
|
|
|
console.log('handleMarkerClick', data);
|
|
|
data.webSite && window.open(data.webSite);
|
|
|
};
|
|
|
-
|
|
|
- const handleSelect = (item: any) => {
|
|
|
- console.log('onSelect', item);
|
|
|
- };
|
|
|
-
|
|
|
- const handleShare = async () => {
|
|
|
- const res = await CreateShareMapApi(form.value.type);
|
|
|
- console.log('handleShare', res);
|
|
|
- const routeData = router.resolve({
|
|
|
- name: 'Map',
|
|
|
- query: { ciphertext: res.ciphertext, type: form.value.type },
|
|
|
- });
|
|
|
- const url = location.protocol + '//' + location.hostname + '/' + routeData.href;
|
|
|
-
|
|
|
- qrCodeShareUrl.value = url;
|
|
|
- };
|
|
|
-
|
|
|
const getMarkerData = (data) => {
|
|
|
return data.map((item) => {
|
|
|
const mapper = {} as any;
|
|
|
@@ -265,31 +237,13 @@
|
|
|
});
|
|
|
};
|
|
|
|
|
|
- const projectFetch = async (params) => {
|
|
|
- const res = await AllGpsApi(params);
|
|
|
- const data = getMarkerData(res);
|
|
|
- console.log('result', data.length);
|
|
|
- locations.value = data;
|
|
|
- return res;
|
|
|
- };
|
|
|
const sceneFetch = async (params) => {
|
|
|
- const res = await AllGpsApi(params);
|
|
|
+ const res = await GetShareMapApi(params);
|
|
|
const data = getMarkerData(res);
|
|
|
console.log('result', data.length);
|
|
|
locations.value = data;
|
|
|
return res;
|
|
|
};
|
|
|
-
|
|
|
- const handleTypeSelect = () => {
|
|
|
- reloadWithParams();
|
|
|
- };
|
|
|
-
|
|
|
- const handleCopy = () => {
|
|
|
- clipboardRef.value = qrCodeShareUrl.value;
|
|
|
- if (isSuccessRef.value) {
|
|
|
- createMessage.success(t('routes.scenes.copyInfi.ok'));
|
|
|
- }
|
|
|
- };
|
|
|
</script>
|
|
|
<style lang="less">
|
|
|
// @import './dark.less';
|
gemercheung
