地图点击查看标点信息 右键添加

src/views/gridman/forestranger/widget/ditu.vue

@@ -14,13 +14,13 @@ export default {
     return {
       map: null,
       clockInList: [],
-      markerArr:[]
+      markerArr: [],
     };
   },
   watch: {
     rowkey: function (e) {
-      console.log('123',e)
-      this.getClockInList()
+      console.log("123", e);
+      this.getClockInList();
     },
     lnglat: function (e) {},
     flyCenter: function (e) {
@@ -45,13 +45,13 @@ export default {
       getMethodCommon("/FireGrid/GetTotalCheckPoint").then((res) => {
         this.clockInList = res.result;
         for (var i = this.markerArr.length - 1; i >= 0; i--) {
-            this.markerArr[i].remove();
+          this.markerArr[i].remove();
         }
         this.addPointLayer();
       });
     },
     addPointLayer() {
-      let _this = this
+      let _this = this;
       this.clockInList.forEach((item) => {
         console.log("iii", item);
         let el = document.createElement("img"); //这里可以是任意标签
@@ -59,15 +59,19 @@ export default {
         el.src = "/img/dakadian.png"; //图片路径赋值
         el.style.width = "40px";
         // el.onclick = function(){
- 
+
         //   console.log('123item',item)
         //   _this.$emit("editClock",item)
         // }
-        
+        console.log(item)
+        const popup = new mapboxgl.Popup({ offset: 25 }).setHTML(`${item.pointname }<br />${item.usernames}`);
         // 添加自定义标记点
-        let marker = new mapboxgl.Marker(el).setLngLat([item.lng, item.lat]).addTo(this.map);
-        this.markerArr.push(marker)
-
+        let marker = new mapboxgl.Marker(el)
+          .setLngLat([item.lng, item.lat])
+          .setPopup(popup)
+          .addTo(this.map);
+          marker
+        this.markerArr.push(marker);
       });
     },
     initMap(url, jwd) {
@@ -85,14 +89,17 @@ export default {
         this.loadMengban();
         this.loadZhenJieLayer();
         this.loadXianJieLayer();
-        
+
         this.getClockInList();
       });
       this.map.on("click", (e) => {
         this.$emit("getLocation", e);
       });
+      this.map.on("contextmenu", (e) => {
+        this.$emit("rightClick", e);
+      });
     },
-    
+
     loadMengban() {
       this.map.addLayer({
         //蒙版图层   //通过边界数据反选 达到挖洞效果