This commit is contained in:
姚宇浩 2024-07-14 11:31:59 +08:00
parent 2ed9eb3ada
commit 5db9278e84
3 changed files with 35 additions and 43 deletions

View File

@ -11,11 +11,7 @@
> >
<template #header="{ close, titleId, titleClass }"> <template #header="{ close, titleId, titleClass }">
<div class="my-header"> <div class="my-header">
<el-icon <el-icon size="26" color="#fff" @click="closeDialog">
size="26"
color="#fff"
@click="closeDialog"
>
<CircleCloseFilled /> <CircleCloseFilled />
</el-icon> </el-icon>
</div> </div>
@ -45,8 +41,14 @@
</div> </div>
</div> </div>
<div style="width: 100%; height: 600px"> <div style="width: 100%; height: 600px">
<Map style="width:100%;height:100%;" v-if="data.title=='交通'" :center="[119.178783, 29.034583]"></Map> <Map
<Map2 style="width:100%;height:100%;" v-if="data.title=='养老机构'" :center="[119.116203, 29.078722]"></Map2> style="width: 100%; height: 100%"
v-if="data.showJt"
></Map>
<Map2
style="width: 100%; height: 100%"
v-if="data.showYl"
></Map2>
</div> </div>
</div> </div>
</el-dialog> </el-dialog>
@ -85,9 +87,8 @@ const emit = defineEmits(["close"]);
const dialogShowMap = ref(); const dialogShowMap = ref();
const data = reactive({ const data = reactive({
title: "", title: "",
list1: [], showJt: false,
list2: [], showYl: false,
year: [],
option: {}, option: {},
bg: [], bg: [],
}); });
@ -97,12 +98,31 @@ watch(
() => props.dialogShowMap, () => props.dialogShowMap,
(newVal, oldVal) => { (newVal, oldVal) => {
dialogShowMap.value = newVal; dialogShowMap.value = newVal;
if (data.title == "交通") {
console.log(1111111111);
setTimeout(() => {
data.showJt = true;
}, 1000);
} else {
setTimeout(() => {
data.showYl = true;
}, 1000);
}
} }
); );
watch( watch(
() => props.title, () => props.title,
(newVal, oldVal) => { (newVal, oldVal) => {
data.title = newVal; data.title = newVal;
if (newVal == "交通") {
setTimeout(() => {
data.showJt = true;
}, 1000);
} else {
setTimeout(() => {
data.showYl = true;
}, 1000);
}
} }
); );
// 使 // 使
@ -112,9 +132,10 @@ onMounted(() => {
const closeDialog = () => { const closeDialog = () => {
dialogShowMap.value = false; dialogShowMap.value = false;
data.showJt = false;
data.showYl = false;
emit("close"); emit("close");
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
:deep(.el-dialog) { :deep(.el-dialog) {

View File

@ -7,14 +7,7 @@ import { onMounted, reactive, nextTick, ref, defineProps, watch } from "vue";
// import mapTown from '@/assets/json/330225.json' // import mapTown from '@/assets/json/330225.json'
import m1 from "@/assets/images/map/m1.png"; import m1 from "@/assets/images/map/m1.png";
import m2 from "@/assets/images/map/m2.png"; import m2 from "@/assets/images/map/m2.png";
const props = defineProps({
center: {
type: Array,
default: () => {
return [119.116203, 29.078722];
},
},
});
let map = null; let map = null;
// //
const mapTownCount = reactive([ const mapTownCount = reactive([
@ -103,7 +96,7 @@ const initMap = () => {
styleId: "d0acde891abd157741b71e12670ee2e6", styleId: "d0acde891abd157741b71e12670ee2e6",
}); });
goMapCenter(props.center, 12); goMapCenter([119.116203, 29.078722], 12);
loadTown(); loadTown();
addPolygonCounty(); addPolygonCounty();
}; };
@ -239,12 +232,6 @@ const createCustomOverlay = (polygon) => {
}); });
map.addOverlay(customOverlay); map.addOverlay(customOverlay);
}; };
watch(
() => props.center,
(newVal) => {
goMapCenter(newVal, 12);
}
);
onMounted(() => { onMounted(() => {
initMap(); initMap();
}); });

View File

@ -12,14 +12,6 @@ import {
defineProps, defineProps,
watch, watch,
} from "vue"; } from "vue";
const props = defineProps({
center: {
type: Array,
default: () => {
return [119.178783, 29.034583];
},
},
});
var map = null; var map = null;
const initMap = () => { const initMap = () => {
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 }); map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
@ -27,22 +19,14 @@ const initMap = () => {
map.setMapStyleV2({ map.setMapStyleV2({
styleId: "d0acde891abd157741b71e12670ee2e6", styleId: "d0acde891abd157741b71e12670ee2e6",
}); });
goMapCenter(props.center, 15); goMapCenter([119.178783, 29.034583], 15);
}; };
// //
const goMapCenter = (point, zoom) => { const goMapCenter = (point, zoom) => {
map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
}; };
watch(
() => props.center,
(newVal) => {
console.log(newVal);
goMapCenter(newVal, 15);
}
);
onMounted(() => { onMounted(() => {
initMap(); initMap();
}); });
</script> </script>