From 751c33d47a185b80596e9dc37938a43e56bc3ca8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 16:53:39 +0800
Subject: [PATCH] fix:修改下拉框样式
---
src/views/daoAnOffice/center/map.vue | 131 +++++++++++++++++++++++++++++++++++++++++--
1 files changed, 123 insertions(+), 8 deletions(-)
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index 0a4df18..3600a7d 100644
--- a/src/views/daoAnOffice/center/map.vue
+++ b/src/views/daoAnOffice/center/map.vue
@@ -24,16 +24,36 @@
<img src="@/assets/img/sslk.png" alt="" class="item-tb-img">
<p class="item-tb-p">瀹炴椂璺喌</p>
</div>
+ </div>
+ <!-- 瀵煎叆鑷畾涔夊脊绐� -->
+ <div class="dialog-container dialog">
+ <DialogType1 ref="dtype1"></DialogType1>
+ <DialogType2 ref="dtype2"></DialogType2>
+ <DialogType3 ref="dtype3"></DialogType3>
+ <DialogType4 ref="dtype4"></DialogType4>
+ <DialogType5 ref="dtype5"></DialogType5>
+ <DialogType6 ref="dtype6"></DialogType6>
+ <DialogType7 ref="dtype7"></DialogType7>
+ <DialogType8 ref="dtype8"></DialogType8>
+ <DialogType9 ref="dtype9"></DialogType9>
</div>
</div>
</template>
<script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref,getCurrentInstance } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';
-import { require } from '@/utils/require.js';
+import DialogType1 from './dialog/dialog-type1.vue';
+import DialogType2 from './dialog/dialog-type2.vue';
+import DialogType3 from './dialog/dialog-type3.vue';
+import DialogType4 from './dialog/dialog-type4.vue';
+import DialogType5 from './dialog/dialog-type5.vue';
+import DialogType6 from './dialog/dialog-type6.vue';
+import DialogType7 from './dialog/dialog-type7.vue';
+import DialogType8 from './dialog/dialog-type8.vue';
+import DialogType9 from './dialog/dialog-type9.vue';
import icon1 from '@/assets/img/icon/icon1.png';
import icon2 from '@/assets/img/icon/icon2.png';
@@ -45,8 +65,23 @@
import icon8 from '@/assets/img/icon/icon8.png';
import icon9 from '@/assets/img/icon/icon9.png';
+const dtype1 = ref(null);
+const dtype2 = ref(null);
+const dtype3 = ref(null);
+const dtype4 = ref(null);
+const dtype5 = ref(null);
+const dtype6 = ref(null);
+const dtype7 = ref(null);
+const dtype8 = ref(null);
+const dtype9 = ref(null);
const map = ref(null);
+
+// dialog闆嗗悎
+const dialogList = ref({});
+// 鑾峰彇褰撳墠瀹炰緥
+const {ctx} = getCurrentInstance();
+
let mapInstance = null;
let trafficLayer = null;;
@@ -55,6 +90,9 @@
// 鍦板浘鐨勫浘鏍囨暟缁�
const markers = [];
+
+// 淇℃伅寮圭獥
+let infoWindow = null;
// 鍥惧垪
const legendList = ref([
@@ -164,14 +202,29 @@
// 杩囨护鍥惧垪
const filterLegend = (item) => {
const { icon, positions, type } = item;
+ const dialog = dialogList.value[type].$refs.dialog;
const tempList = [];
positions.map(position => {
const markerIcon = createIcon(icon);
- const marker = ceateMarker(markerIcon, position);
+ const marker = ceateMarker(type, markerIcon, position);
tempList.push(marker);
+ marker.on('click', (markerEvent) => {
+ infoWindow.setContent(dialog);
+ infoWindow.open(mapInstance, markerEvent.target.getPosition());
+ // console.log(dialogList.value[type]);
+ });
});
markers.push({ type: type, markerList: tempList })
mapInstance.add(tempList);
+}
+
+// 鍒涘缓寮圭獥
+const createInfoWindow = () => {
+ infoWindow = new AMap.InfoWindow({
+ isCustom: true,
+ closeWhenClickMap: true,
+ offset: new AMap.Pixel(20, -20),
+ });
}
// 鍒涘缓鍥炬爣
@@ -185,11 +238,12 @@
// 鍒涘缓marker
-const ceateMarker = (icon, position) => {
+const ceateMarker = (type, icon, position) => {
return new AMap.Marker({
icon: icon,
position: new AMap.LngLat(position[0], position[1]),
zooms: [2, 20],
+ extData: type
});
}
@@ -222,6 +276,14 @@
}
+// 寮圭獥涓庣粍浠舵槧灏�
+const mapComponentInstance = () => {
+ legendList.value.map((item) => {
+ dialogList.value[item.id] = ctx.$refs[`dtype${item.id}`];
+ })
+}
+
+
onMounted(() => {
AMapLoader.load({
key: "2898109c22191c3969957500934169dc", //鐢宠濂界殑 Web 绔紑鍙戣�� Key锛岄娆¤皟鐢� load 鏃跺繀濉�
@@ -243,9 +305,56 @@
trafficLayer.setMap(mapInstance);
- // test();
- // console.log(markers.value[0]);
- // mapInstance.add(markers.value[0].markerList);
+ // 闄愬埗涓�涓尯鍩熻疆寤�
+ const options = {
+ subdistrict: 0,
+ extensions: "all",
+ level: "district",
+ };
+
+ AMap.plugin("AMap.DistrictSearch", function () {
+ //鍦ㄥ洖璋冨嚱鏁颁腑瀹炰緥鍖栨彃浠讹紝骞朵娇鐢ㄦ彃浠跺姛鑳�
+ const district = new AMap.DistrictSearch(options);
+ district.search("閮芥睙鍫板競", (status, result) => {
+ const outer = [
+ new AMap.LngLat(-360, 90, true),
+ new AMap.LngLat(-360, -90, true),
+ new AMap.LngLat(360, -90, true),
+ new AMap.LngLat(360, 90, true),
+ ];
+ const holes = result.districtList[0].boundaries;
+
+ const pathArray = [outer];
+ pathArray.push.apply(pathArray, holes);
+ const polygon = new AMap.Polygon({
+ pathL: pathArray,
+ //绾挎潯棰滆壊锛屼娇鐢�16杩涘埗棰滆壊浠ｇ爜璧嬪�笺�傞粯璁ゅ�间负#006600
+ strokeColor: "rgb(20,164,173)",
+ strokeWeight: 4,
+ //杞粨绾块�忔槑搴︼紝鍙栧�艰寖鍥碵0,1]锛�0琛ㄧず瀹屽叏閫忔槑锛�1琛ㄧず涓嶉�忔槑銆傞粯璁や负0.9
+ strokeOpacity: 0.5,
+ //澶氳竟褰㈠～鍏呴鑹诧紝浣跨敤16杩涘埗棰滆壊浠ｇ爜璧嬪�硷紝濡傦細#FFAA00
+ fillColor: "rgba(0,0,0)",
+ //澶氳竟褰㈠～鍏呴�忔槑搴︼紝鍙栧�艰寖鍥碵0,1]锛�0琛ㄧず瀹屽叏閫忔槑锛�1琛ㄧず涓嶉�忔槑銆傞粯璁や负0.9
+ fillOpacity: 1,
+ //杞粨绾挎牱寮忥紝瀹炵嚎:solid锛岃櫄绾�:dashed
+ strokeStyle: "solid",
+ /*鍕惧嫆褰㈢姸杞粨鐨勮櫄绾垮拰闂撮殭鐨勬牱寮忥紝姝ゅ睘鎬у湪strokeStyle 涓篸ashed 鏃舵湁鏁堬紝 姝ゅ睘鎬у湪
+ ie9+娴忚鍣ㄦ湁鏁� 鍙栧�硷細
+ 瀹炵嚎锛歔0,0,0]
+ 铏氱嚎锛歔10,10] 锛孾10,10] 琛ㄧず10涓儚绱犵殑瀹炵嚎鍜�10涓儚绱犵殑绌虹櫧锛堝姝ゅ弽澶嶏級缁勬垚鐨勮櫄绾�
+ 鐐圭敾绾匡細[10,2,10]锛� [10,2,10] 琛ㄧず10涓儚绱犵殑瀹炵嚎鍜�2涓儚绱犵殑绌虹櫧 + 10涓儚绱犵殑瀹�
+ 绾垮拰10涓儚绱犵殑绌虹櫧 锛堝姝ゅ弽澶嶏級缁勬垚鐨勮櫄绾�*/
+ strokeDasharray: [10, 2, 10],
+ });
+ polygon.setPath(pathArray);
+ mapInstance.add(polygon);
+ });
+ });
+ // 鍒涘缓infowindow
+ createInfoWindow();
+ // 鏄犲皠缁勪欢
+ mapComponentInstance();
})
.catch((e) => {
console.log(e);
@@ -322,7 +431,7 @@
.road {
position: absolute;
- bottom: 202px;
+ bottom: 180px;
left: 2434px;
z-index: 999;
width: 65px;
@@ -355,4 +464,10 @@
:deep(.amap-copyright) {
visibility: hidden !important;
}
+
+.dialog {
+ opacity: 0;
+ position: absolute;
+ left: -500px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.8.0