diff --git a/src/assets/images/map/dwd.png b/src/assets/images/map/dwd.png new file mode 100644 index 0000000..a538b30 Binary files /dev/null and b/src/assets/images/map/dwd.png differ diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index f1448ce..50a50f8 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -57,7 +57,7 @@ class="jbggfwq_content_item_right_item" v-for="itemm in item.child" :class="{ choose: itemm.id == choose.fwq }" - @click="changeFwq(itemm.id, itemm.fwqList,itemm.center)" + @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)" > {{ itemm.name }} @@ -111,6 +111,7 @@ import j9 from "@/assets/images/map/j9.png"; import j10 from "@/assets/images/map/j10.png"; import m1 from "@/assets/images/map/m1.png"; import m2 from "@/assets/images/map/m2.png"; +import dwd from "@/assets/images/map/dwd.png"; //地图设置 //默认龙游县灰色地块 const mapTownDataDK = reactive([]); @@ -161,6 +162,10 @@ const addPolygonCounty = () => { fillColor: fillColor, fillOpacity: 0.7, name: item.name, + flag: "v", + }); + polygon.addEventListener("click", () => { + console.log(1111111); }); map.addOverlay(polygon); } @@ -185,8 +190,7 @@ const createCustomOverlay = (polygon) => { div.style.display = "flex"; div.style.justifyContent = "center"; div.style.alignItems = "center"; - div.style.background = - "url(/src/assets/images/map/b1.png) no-repeat 0/100% 100%"; + div.style.background = polygon.bgColor; div.style.cursor = "pointer"; div.setAttribute("name", this.properties.title); @@ -198,10 +202,9 @@ const createCustomOverlay = (polygon) => { div.appendChild(title); title.appendChild(document.createTextNode(this.properties.title)); - - let img2 = document.createElement("img"); - img2.style.width = "60px"; + img2.style.width = "20px"; + img2.style.height = "20px"; img2.src = this.properties.imgSrc2; content.appendChild(div); @@ -222,7 +225,7 @@ const createCustomOverlay = (polygon) => { offsetY: -10, properties: { title: polygon.name, - imgSrc2: m2, + imgSrc2: dwd, type: "customOverlay", }, }); @@ -243,7 +246,7 @@ const choose = ref({ const change = (id, name) => { choose.value[name] = id; }; -const changeFwq = (id, list,center) => { +const changeFwq = (id, list, center) => { choose.value.fwq = id; fwqList.value = list; goMapCenter(center, 17); @@ -433,83 +436,102 @@ const jbfwqTotal = ref([ { id: 41, name: "新溪社区", - center:[119.1845892, 28.8540481], + center: [119.1845892, 28.8540481], fwqList: [ { name: "溪口幼儿园", point: [119.1856806, 28.8509359], + bgColor: "#00b050", }, { name: "衢州学院附属幼儿园", point: [119.182056, 28.8566857], + bgColor: "#00b050", }, { name: "溪口中银小学", point: [119.1845353, 28.8584533], + bgColor: "#00b050", }, { name: "溪口初中", point: [119.180978, 28.8525691], + bgColor: "#00b050", }, { name: "居家养老中心", point: [119.186287, 28.8491049], + bgColor: "#f4c243", }, { name: "共享食堂", point: [119.184706, 28.8563179], + bgColor: "#f4c243", }, { name: "老年活动中心", point: [119.1839065, 28.8566106], + bgColor: "#f4c243", }, { name: "残疾人之家", point: [119.1862825, 28.8491207], + bgColor: "#f4c243", }, { name: "智慧篮球场", point: [119.1839873, 28.8560886], + bgColor: "#00b0f0", }, { name: "慢行步道", point: [119.1843107, 28.8510743], + bgColor: "#00b0f0", }, { name: "文化礼堂", point: [119.1845532, 28.8562072], + bgColor: "#a1ce63", }, { name: "综合文化站", point: [119.1845982, 28.8482348], + bgColor: "#a1ce63", }, { name: "共享菜园", point: [119.1834393, 28.8559858], + bgColor: "#a1ce63", }, { name: "零工市场", point: [119.1811487, 28.8614348], + bgColor: "#a1ce63", }, { name: "溪口中心医院", point: [119.1839334, 28.8516437], + bgColor: "#0070c0", }, { name: "溪口菜市场", point: [119.1848317, 28.8544673], + bgColor: "#184e32", }, { name: "大型超市", point: [119.1845892, 28.8540481], + bgColor: "#184e32", }, { name: "智慧停车场", point: [119.1865654, 28.8555824], + bgColor: "#184e32", }, { name: "溪口镇便民服务中心", point: [119.1838436, 28.8565473], + bgColor: "#184e32", }, ], },