From dfa2e66389df106ef38a4fd621f2e3e0cf91ace8 Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期五, 08 三月 2024 15:28:48 +0800
Subject: [PATCH] feat:地图信息框点击
---
src/views/daoAnOffice/center/map.vue | 86 +++++++++++++++++++++++++++++++++++++++----
1 files changed, 78 insertions(+), 8 deletions(-)
diff --git a/src/views/daoAnOffice/center/map.vue b/src/views/daoAnOffice/center/map.vue
index 133bad3..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,14 +305,13 @@
trafficLayer.setMap(mapInstance);
-
+ // 闄愬埗涓�涓尯鍩熻疆寤�
const options = {
subdistrict: 0,
extensions: "all",
level: "district",
};
- // 闄愬埗涓�涓尯鍩熻疆寤�
AMap.plugin("AMap.DistrictSearch", function () {
//鍦ㄥ洖璋冨嚱鏁颁腑瀹炰緥鍖栨彃浠讹紝骞朵娇鐢ㄦ彃浠跺姛鑳�
const district = new AMap.DistrictSearch(options);
@@ -290,7 +351,10 @@
mapInstance.add(polygon);
});
});
-
+ // 鍒涘缓infowindow
+ createInfoWindow();
+ // 鏄犲皠缁勪欢
+ mapComponentInstance();
})
.catch((e) => {
console.log(e);
@@ -367,7 +431,7 @@
.road {
position: absolute;
- bottom: 202px;
+ bottom: 180px;
left: 2434px;
z-index: 999;
width: 65px;
@@ -400,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