From 5111f3f9c1c31b81af25cb737ec9608d9ff09f42 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期一, 20 五月 2024 16:51:20 +0800
Subject: [PATCH] 替换图片和地图层级
---
src/pages/territory/territory.vue | 23 +++++++++++++++++++----
1 files changed, 19 insertions(+), 4 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index d359b3d..6221934 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -170,7 +170,7 @@
<!-- 鏈濅唬 -->
<view
class="flex flex-center"
- style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
+ style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
>
<ul class="flex">
<li
@@ -456,12 +456,21 @@
iconAnchor: [24, 41], // 鍥炬爣灏嗗搴旀爣璁扮偣鐨勪綅缃� 杩欎釜鏄噸鐐癸紝 銆愬��1锛屽��2銆戯紝鍊�1锛氫负鍥炬爣鍧愭爣绗竴涓��(鍗�32)鐨勪竴鍗婏紝鍊�2锛氫负鍥炬爣鍧愭爣绗簩涓��(鍗�52)
popupAnchor: [1, -24], // 璇ョ偣鏄浉瀵逛簬iconAnchor寮瑰嚭淇℃伅鐨勪綅缃� 杩欎釜鏄垜鎵嬪姩璋冨嚭鏉ョ殑锛屾枃妗ｉ粯璁ゅ師濮嬪�兼槸[-1锛�-76]锛屾垜鏄幓涓�鍗婂�硷紝鍙栦竴鍗婂�艰皟鍑烘潵鐨�
});
+
+ let htmlStr = '<p><span class="map-circle-name">';
+ ('</span><br><span class="map-circle-count">');
+ ("</span><p/>");
+ let icon = L.divIcon({
+ html: "<div class='map-circle-name'></div>",
+ iconSize: [80, 80],
+ className: "map-circle",
+ });
this.map = map;
if (markerList.length) {
for (let i = 0; i < markerList.length; i++) {
const item = markerList[i];
const temp_mark = L.marker([item.yCoord, item.xCoord], {
- icon: DefaultIcon1,
+ icon: icon,
}).addTo(map);
temp_mark.on("click", (e) => {
this.isEchTrue = true;
@@ -514,6 +523,12 @@
</script>
<style>
+::v-deep .map-circle-name {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background-color: #2070bc;
+}
.pageBox {
width: 100%;
height: 100%;
@@ -634,10 +649,10 @@
}
#map {
- height: 600px;
+ height: 100%;
width: 100%;
margin: 0 auto;
font-size: 14px !important;
- /* z-index: -1 !important; */
+ z-index: 10 !important;
}
</style>
--
Gitblit v1.9.1