feats

index.html

@@ -15,6 +15,15 @@
         securityJsCode: AMAP_SEC_CODE,
       };
     </script>
+    <style type="text/css">
+      .amap-logo{
+      display: none;
+      opacity:0 !important;
+      }
+      .amap-copyright {
+          opacity:0;
+      }
+    </style>
     <!-- <script src="./vconsole.min.js"></script>
     <script>
       const vConsole = new VConsole();

src/components/CustMap.vue

@@ -34,15 +34,30 @@
       const { AMap, img } = nw;
       mapStyle.value = { width: `${img.width}px`, height: `${img.height}px` };
 
+      // 初始化地图      
+      const center = [118.798954,31.963517];
+      const map = new AMap.Map(elRef.value, {
+        center,
+        zooms,
+        zoom: 15,
+      });
+
+      // 获取左上角经纬度
+      // 正常情况坐标应该是 0,0 ; 但是实际 0,0 正好是地图的一半位置, 不清楚为啥
+      const lt = map.containerToLngLat(new AMap.Pixel(0, -img.height / 2));
+      // 获取右下角经纬度
+      const rb = map.containerToLngLat(new AMap.Pixel(img.width, img.height / 2));
+
       // 图片层
       const imageLayer = new AMap.ImageLayer({
         url: props.image,
         bounds: new AMap.Bounds(
-            [118.791036, 31.973077],
-            [118.806915, 31.953999]
+            [lt.lng, lt.lat],
+            [rb.lng, rb.lat]
         ),
         zooms,
       });
+      map.setLayers([imageLayer])
 
       // 背景层
       const backCovers = [
@@ -53,32 +68,22 @@
           new AMap.LngLat(360,90,true),
         ],
         [
-          [118.791036, 31.973077],
-          [118.806915, 31.973077],
-          [118.806915, 31.953999],
-          [118.791036, 31.953999],
+          [lt.lng, lt.lat],
+          [rb.lng, lt.lat],
+          [rb.lng, rb.lat],
+          [lt.lng, rb.lat],
         ]
       ]
 
       const polygon = new AMap.Polygon({
           pathL: backCovers,
-          strokeColor: '#00eeff',
-          strokeWeight: 1,
+          strokeWeight: 0,
           fillColor: '#71B3ff',
           fillOpacity: 0.5
       });
       polygon.setPath(backCovers);
-      
-      const center = [118.798954,31.963517];
-      const map = new AMap.Map(elRef.value, {
-        center,
-        zooms,
-        zoom: 15,
-        layers: [
-          imageLayer
-        ],
-      });
       map.add(polygon);
+
       map.on('click',function(e){
         console.log('--------->', e)
       })
@@ -104,6 +109,9 @@
   overflow: hidden;
 
   & > div {
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 100%;
     height: 100%;
   }