tj

src/components/Layouts/Map.vue

@@ -28,20 +28,33 @@
                     map.setMaxBounds(bounds);
                 /**添加标记点 */
                 const docWidth = document.documentElement.clientWidth;
-                let point=[-100, 100]
-                let item={id:1}
-                let icon="project-12"
+                const markers=L.layerGroup()
+                let coordinates=[-100, 100];
+                let options={id:1};
+                let icon="project-12";
+                let tip="盲板抽堵作业";
                 let iconSize = [40*docWidth/1920, 50*docWidth/1920];
-
-                let myIcon = L.divIcon({
-                    className: icon,
-                    iconSize: iconSize,
-                });
-                let  marker = L.marker(point, {...item, icon : myIcon}).addTo(map);
-                marker.on('click', function(ev) {
-                    let id=ev.target.options?.id
-                    console.log({ev,id})
-                })
+                function drawMark(option={tip,icon,options,coordinates}){
+                    console.log({option})
+                    let myIcon = L.divIcon({
+                        className: option.icon,
+                        iconSize: iconSize,
+                    });
+                    let  marker = L.marker(option.coordinates, {...option.options, icon : myIcon}).bindPopup(option.tip).addTo(markers);
+                    marker.on('click', function(ev) {
+                        let id=ev.target.options?.id
+                        console.log({ev,id})
+                    })                    
+                }
+                for(let i=1;i<13;i++){
+                    drawMark({
+                        tip:`第${i}个坐标点,<br />位置：${-20*i},${i*20+50}`,
+                        icon:`project-${i}`,
+                        coordinates:[-33*i,i*48],
+                        options:{id:i}
+                    })
+                }
+                markers.addTo(map)
             }
         }
     }

src/style.css

@@ -99,11 +99,12 @@ p{
 /* 标记点 */
 .leaflet-marker-icon{
   background-size: 100%;
+  background-image: url("@/assets/images/layers/0.png");
 }
-.leaflet-marker-icon.project{
+.leaflet-marker-icon.project-0{
   background-image: url("@/assets/images/layers/0.png");
 }
-.leaflet-marker-icon.project1{
+.leaflet-marker-icon.project-1{
   background-image: url("@/assets/images/layers/1.png");
 }
 .leaflet-marker-icon.project-2{