右键单击关闭小班详情

index.html

@@ -9,7 +9,6 @@
     <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
     <title>ntbigscreen</title>
-    
     <style type="text/css">
       .amap-logo{
       display: none;

src/components/amap.vue

@@ -217,7 +217,8 @@ export default {
               position: lanLatArr,
               icon: require('@/assets/img/small-marker.png'),
               anchor: 'bottom-center',
-              offset: new AMap.Pixel(0, 0)
+              offset: new AMap.Pixel(0, 0),
+              zIndex: 9999
             });
             this.smallMarker.setLabel({
               direction: 'right',

src/components/amapnow.vue

@@ -76,7 +76,7 @@ export default {
       AMapLoader.load({
         key: 'f79d862df9288710e3dce6591af9dff1', // 申请好的Web端开发者Key，首次调用 load 时必填
         version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugin:['AMap.MapboxVectorTileLayer'],
+        plugins: ['AMap.MapboxVectorTileLayer'],
         AMapUI: {
           // 是否加载 AMapUI，缺省不加载
           version: '1.1', // AMapUI 缺省 1.1
@@ -120,46 +120,78 @@ export default {
           }
         });
         wms.setMap(_this.map);
-        this.getWP()
+        _this.map.on('complete', function (e) {
+          AMap.plugin(['AMap.MapboxVectorTileLayer'], function () {
+            var mvtLayer = new AMap.MapboxVectorTileLayer({
+              zIndex: 9,
+              opacity: 1,
+              url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=58f9d9f14f2700689ddbc618495693b7&id=b86e9fc4-db2a-4c24-8577-d42a51e6a984',
+              dataZooms: [1, 18],
+              tileSize: 256,
+              styles: {
+                polygon: {
+                  sourceLayer: 'default',
+                  color: 'rgba(62,110,255,0.3)',
+                  borderColor: '#3E6EFF',
+                  borderWidth: 2,
+                  visible: 1
+                },
+                line: {
+                  sourceLayer: 'default',
+                  color: '#3E6EFF',
+                  lineWidth: 2,
+                  visible: 1
+                },
+                point: {
+                  sourceLayer: 'default',
+                  radius: 6,
+                  color: '#3E6EFF',
+                  borderColor: '#FFFFFF',
+                  borderWidth: 2,
+                  visible: 1
+                }
+              }
+            });
+            this.map.add(mvtLayer);
+          });
+        });
       });
     },
     getWP() {
       console.log('123');
-      // AMap.plugin(['AMap.MapboxVectorTileLayer'], function () {
-        if (this.map) {
-          var mvtLayer = new AMap.MapboxVectorTileLayer({
-            zIndex: 9,
-            opacity: 1,
-            url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=58f9d9f14f2700689ddbc618495693b7&id=b86e9fc4-db2a-4c24-8577-d42a51e6a984',
-            dataZooms: [1, 18],
-            tileSize: 256,
-            styles: {
-              polygon: {
-                sourceLayer: 'default',
-                color: 'rgba(62,110,255,0.3)',
-                borderColor: '#3E6EFF',
-                borderWidth: 2,
-                visible: 1
-              },
-              line: {
-                sourceLayer: 'default',
-                color: '#3E6EFF',
-                lineWidth: 2,
-                visible: 1
-              },
-              point: {
-                sourceLayer: 'default',
-                radius: 6,
-                color: '#3E6EFF',
-                borderColor: '#FFFFFF',
-                borderWidth: 2,
-                visible: 1
-              }
+      AMap.plugin(['AMap.MapboxVectorTileLayer'], function () {
+        var mvtLayer = new AMap.MapboxVectorTileLayer({
+          zIndex: 9,
+          opacity: 1,
+          url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=58f9d9f14f2700689ddbc618495693b7&id=b86e9fc4-db2a-4c24-8577-d42a51e6a984',
+          dataZooms: [1, 18],
+          tileSize: 256,
+          styles: {
+            polygon: {
+              sourceLayer: 'default',
+              color: 'rgba(62,110,255,0.3)',
+              borderColor: '#3E6EFF',
+              borderWidth: 2,
+              visible: 1
+            },
+            line: {
+              sourceLayer: 'default',
+              color: '#3E6EFF',
+              lineWidth: 2,
+              visible: 1
+            },
+            point: {
+              sourceLayer: 'default',
+              radius: 6,
+              color: '#3E6EFF',
+              borderColor: '#FFFFFF',
+              borderWidth: 2,
+              visible: 1
             }
-          });
-          this.map.add(mvtLayer);
-        }
-      // });
+          }
+        });
+        this.map.add(mvtLayer);
+      });
     },
     loadMapData(DistrictExplorer, $) {
       let that = this;

src/views/index.vue

@@ -3,7 +3,7 @@
  * @Author: wangcc
  * @Date: 2022-07-06 15:56:45
  * @LastEditors: wangcc
- * @LastEditTime: 2022-07-08 16:47:31
+ * @LastEditTime: 2022-07-08 17:53:09
  * @FilePath: \castgroup_bigscreen\src\views\index.vue
  * @Copyright: Copyright (c) 2016~2022 by wangcc, All Rights Reserved. 
 -->