github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-26 00:26:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: remove map demo

Browse Source
This commit is contained in:
vben
2023-04-07 15:50:59 +08:00
parent 82eaf1a74b
commit 70e44af191
8 changed files with 1 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/hooks/web/useScript.ts
View File

@@ -1,46 +0,0 @@
import { onMounted, onUnmounted, ref } from 'vue';
interface ScriptOptions {
src: string;
}
export function useScript(opts: ScriptOptions) {
const isLoading = ref(false);
const error = ref(false);
const success = ref(false);
let script: HTMLScriptElement;
const promise = new Promise((resolve, reject) => {
onMounted(() => {
script = document.createElement('script');
script.type = 'text/javascript';
script.onload = function () {
isLoading.value = false;
success.value = true;
error.value = false;
resolve('');
};
script.onerror = function (err) {
isLoading.value = false;
success.value = false;
error.value = true;
reject(err);
};
script.src = opts.src;
document.head.appendChild(script);
});
});
onUnmounted(() => {
script && script.remove();
});
return {
isLoading,
error,
success,
toPromise: () => promise,
};
}

2
src/hooks/web/useTitle.ts
View File

@@ -26,7 +26,7 @@ export function useTitle() {
return;
}
const tTitle = t(route?.meta?.title as string);
const tTitle = t(route?.meta?.title ?? '');
pageTitle.value = tTitle ? ` ${tTitle} - ${title} ` : `${title}`;
},
{ immediate: true },

3
src/locales/lang/en/routes/demo.ts
View File

@@ -1,8 +1,5 @@
export default {
charts: {
baiduMap: 'Baidu map',
aMap: 'A map',
googleMap: 'Google map',
charts: 'Chart',
map: 'Map',
line: 'Line',

3
src/locales/lang/zh-CN/routes/demo.ts
View File

@@ -1,8 +1,5 @@
export default {
charts: {
baiduMap: '百度地图',
aMap: '高德地图',
googleMap: '谷歌地图',
charts: '图表',
map: '地图',
line: '折线图',

25
src/router/routes/modules/demo/charts.ts
View File

@@ -14,31 +14,6 @@ const charts: AppRouteModule = {
title: t('routes.demo.charts.charts'),
},
children: [
{
path: 'baiduMap',
name: 'BaiduMap',
meta: {
title: t('routes.demo.charts.baiduMap'),
},
component: () => import('/@/views/demo/charts/map/Baidu.vue'),
},
{
path: 'aMap',
name: 'AMap',
meta: {
title: t('routes.demo.charts.aMap'),
},
component: () => import('/@/views/demo/charts/map/Gaode.vue'),
},
{
path: 'googleMap',
name: 'GoogleMap',
meta: {
title: t('routes.demo.charts.googleMap'),
},
component: () => import('/@/views/demo/charts/map/Google.vue'),
},
{
path: 'echarts',
name: 'Echarts',

46
src/views/demo/charts/map/Baidu.vue
View File

@@ -1,46 +0,0 @@
<template>
<div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '/@/hooks/web/useScript';
const BAI_DU_MAP_URL =
'https://api.map.baidu.com/getscript?v=3.0&ak=OaBvYmKX3pjF7YFUFeeBCeGdy9Zp7xB2&services=&t=20210201100830&s=1';
export default defineComponent({
name: 'BaiduMap',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
async function initMap() {
await toPromise();
await nextTick();
const wrapEl = unref(wrapRef);
if (!wrapEl) return;
const BMap = (window as any).BMap;
const map = new BMap.Map(wrapEl);
const point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true);
}
onMounted(() => {
initMap();
});
return { wrapRef };
},
});
</script>

47
src/views/demo/charts/map/Gaode.vue
View File

@@ -1,47 +0,0 @@
<template>
<div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '/@/hooks/web/useScript';
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=d7bb98e7185300250dd5f918c12f484b';
export default defineComponent({
name: 'AMap',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: A_MAP_URL });
async function initMap() {
await toPromise();
await nextTick();
const wrapEl = unref(wrapRef);
if (!wrapEl) return;
const AMap = (window as any).AMap;
new AMap.Map(wrapEl, {
zoom: 11,
center: [116.397428, 39.90923],
viewMode: '3D',
});
}
onMounted(() => {
initMap();
});
return { wrapRef };
},
});
</script>

53
src/views/demo/charts/map/Google.vue
View File

@@ -1,53 +0,0 @@
<template>
<div ref="wrapRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick, unref, onMounted } from 'vue';
import { useScript } from '/@/hooks/web/useScript';
const MAP_URL =
'https://maps.googleapis.com/maps/api/js?key=AIzaSyBQWrGwj4gAzKndcbwD5favT9K0wgty_0&signed_in=true';
export default defineComponent({
name: 'GoogleMap',
props: {
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: 'calc(100vh - 78px)',
},
},
setup() {
const wrapRef = ref<HTMLDivElement | null>(null);
const { toPromise } = useScript({ src: MAP_URL });
async function initMap() {
await toPromise();
await nextTick();
const wrapEl = unref(wrapRef);
if (!wrapEl) return;
const google = (window as any).google;
const latLng = { lat: 116.404, lng: 39.915 };
const map = new google.maps.Map(wrapEl, {
zoom: 4,
center: latLng,
});
new google.maps.Marker({
position: latLng,
map: map,
title: 'Hello World!',
});
}
onMounted(() => {
initMap();
});
return { wrapRef };
},
});
</script>