diff --git a/src/assets/images/map/b2.png b/src/assets/images/map/b2.png new file mode 100644 index 0000000..ae01a46 Binary files /dev/null and b/src/assets/images/map/b2.png differ diff --git a/src/assets/images/map/b3.png b/src/assets/images/map/b3.png new file mode 100644 index 0000000..d73ff16 Binary files /dev/null and b/src/assets/images/map/b3.png differ diff --git a/src/assets/images/map/b4.png b/src/assets/images/map/b4.png new file mode 100644 index 0000000..6a612d7 Binary files /dev/null and b/src/assets/images/map/b4.png differ diff --git a/src/assets/images/map/b5.png b/src/assets/images/map/b5.png new file mode 100644 index 0000000..3e38de9 Binary files /dev/null and b/src/assets/images/map/b5.png differ diff --git a/src/assets/images/map/b6.png b/src/assets/images/map/b6.png new file mode 100644 index 0000000..9babd17 Binary files /dev/null and b/src/assets/images/map/b6.png differ diff --git a/src/assets/images/map/bb1.png b/src/assets/images/map/bb1.png new file mode 100644 index 0000000..f7a7e63 Binary files /dev/null and b/src/assets/images/map/bb1.png differ diff --git a/src/assets/images/map/qqlv.png b/src/assets/images/map/qqlv.png new file mode 100644 index 0000000..c3641ab Binary files /dev/null and b/src/assets/images/map/qqlv.png differ diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index f3edafd..07a2cc7 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -118,6 +118,13 @@ import fwqbg2 from "@/assets/images/map/qlan.png"; import fwqbg3 from "@/assets/images/map/slan.png"; import fwqbg4 from "@/assets/images/map/slv.png"; import fwqbg5 from "@/assets/images/map/shuang.png"; +import fwqbg6 from "@/assets/images/map/qqlv.png"; +import b1 from "@/assets/images/map/bb1.png"; +import b2 from "@/assets/images/map/b2.png"; +import b3 from "@/assets/images/map/b3.png"; +import b4 from "@/assets/images/map/b4.png"; +import b5 from "@/assets/images/map/b5.png"; +import b6 from "@/assets/images/map/b6.png"; const title_choose = ref("龙游县"); //村社颜色列表 const colorList = [ @@ -481,9 +488,9 @@ const createCustomOverlay = (polygon) => { div.style.display = "flex"; div.style.justifyContent = "center"; div.style.alignItems = "center"; - div.style.background = `url(${fwqbg1}) no-repeat 0/100% 100%`; + div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`; div.style.cursor = "pointer"; - div.style.transform = "translateX(30px)"; + div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`; div.setAttribute("name", this.properties.title); var title = document.createElement("div"); @@ -517,7 +524,7 @@ const createCustomOverlay = (polygon) => { offsetY: 0, properties: { title: polygon.name, - imgSrc2: dwd, + imgSrc2: polygon.img2, type: "customOverlay", }, }); @@ -793,97 +800,136 @@ const jbfwqTotal = ref([ name: "溪口幼儿园", point: [119.1856806, 28.8509359], bgColor: "#00b050", - + img: fwqbg1, + img2: b2, + x:30, + y:0, }, { name: "衢州学院附属幼儿园", point: [119.182056, 28.8566857], bgColor: "#00b050", + img: fwqbg1, + img2: b2, }, { name: "溪口中银小学", point: [119.1845353, 28.8584533], bgColor: "#00b050", + img: fwqbg1, + img2: b2, }, { name: "溪口初中", point: [119.180978, 28.8525691], bgColor: "#00b050", + img: fwqbg1, + img2: b2, }, { name: "居家养老中心", point: [119.186287, 28.8491049], bgColor: "#f4c243", + img: fwqbg5, + img2: b1, }, { name: "共享食堂", point: [119.184706, 28.8563179], bgColor: "#f4c243", + img: fwqbg5, + img2: b1, }, { name: "老年活动中心", point: [119.1839065, 28.8566106], bgColor: "#f4c243", + img: fwqbg5, + img2: b1, }, { name: "残疾人之家", point: [119.1862825, 28.8491207], bgColor: "#f4c243", + img: fwqbg5, + img2: b1, }, { name: "智慧篮球场", point: [119.1839873, 28.8560886], bgColor: "#00b0f0", + img: fwqbg2, + img2: b3, }, { name: "慢行步道", point: [119.1843107, 28.8510743], bgColor: "#00b0f0", + img: fwqbg2, + img2: b3, }, { name: "文化礼堂", point: [119.1845532, 28.8562072], bgColor: "#a1ce63", + img: fwqbg6, + img2: b4, }, { name: "综合文化站", point: [119.1845982, 28.8482348], bgColor: "#a1ce63", + img: fwqbg6, + img2: b4, }, { name: "共享菜园", point: [119.1834393, 28.8559858], bgColor: "#a1ce63", + img: fwqbg6, + img2: b4, }, { name: "零工市场", point: [119.1811487, 28.8614348], bgColor: "#a1ce63", + img: fwqbg6, + img2: b4, }, { name: "溪口中心医院", point: [119.1839334, 28.8516437], bgColor: "#0070c0", + img: fwqbg3, + img2: b5, }, { name: "溪口菜市场", point: [119.1848317, 28.8544673], bgColor: "#184e32", + img: fwqbg4, + img2: b6, }, { name: "大型超市", point: [119.1845892, 28.8540481], bgColor: "#184e32", + img: fwqbg4, + img2: b6, }, { name: "智慧停车场", point: [119.1865654, 28.8555824], bgColor: "#184e32", + img: fwqbg4, + img2: b6, }, { name: "溪口镇便民服务中心", point: [119.1838436, 28.8565473], bgColor: "#184e32", + img: fwqbg4, + img2: b6, }, ], },