This commit is contained in:
parent
2ed9eb3ada
commit
5db9278e84
|
@ -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) {
|
||||||
|
|
|
@ -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();
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue