feats

index.html

@@ -10,20 +10,6 @@
     <script src="./qrcode.min.js"></script>
     <script src="./config.js"></script>
     <title>和“宁好”一起，跟着诗歌游南京</title>
-    <script>
-      window._AMapSecurityConfig = {
-        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

@@ -6,8 +6,8 @@
 </template>
 
 <script setup>
-  import AMapLoader from '@amap/amap-jsapi-loader';
-  import { onMounted, reactive, ref, watch } from "vue";
+  import { ref } from "vue";
+  import { newMarker } from '@/utils/amap'
 
   const props = defineProps({
     image: {
@@ -22,85 +22,73 @@
 
   const elRef = ref();
   const mapStyle = ref({});
-  const mapState = reactive({ AMap: undefined, img: undefined, inited: false });
-
-  const onLoad = e => (mapState.img = e.target);
-
-  watch(mapState, (nw, od) => {
-    if (nw.AMap && nw.img && !nw.inited) {
-      nw.inited = true;
-  
-      const zooms = [15, 20];
-      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(
-            [lt.lng, lt.lat],
-            [rb.lng, rb.lat]
-        ),
-        zooms,
-      });
-      map.setLayers([imageLayer])
-
-      // 背景层
-      const backCovers = [
-        [
-          new AMap.LngLat(-360,90,true),
-          new AMap.LngLat(-360,-90,true),
-          new AMap.LngLat(360,-90,true),
-          new AMap.LngLat(360,90,true),
-        ],
-        [
+
+  const onLoad = e => {
+    const img = e.target;
+    
+    const zooms = [15, 16.5];
+    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: zooms[0],
+    });
+
+    // 获取左上角经纬度
+    // 正常情况坐标应该是 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 bounds = new AMap.Bounds(
           [lt.lng, lt.lat],
-          [rb.lng, lt.lat],
-          [rb.lng, rb.lat],
-          [lt.lng, rb.lat],
-        ]
+          [rb.lng, rb.lat]
+      );
+    const imageLayer = new AMap.ImageLayer({
+      url: props.image,
+      bounds,
+      zooms,
+    });
+    map.setLayers([imageLayer])
+
+    // 背景层
+    const backCovers = [
+      [
+        new AMap.LngLat(-360,90,true),
+        new AMap.LngLat(-360,-90,true),
+        new AMap.LngLat(360,-90,true),
+        new AMap.LngLat(360,90,true),
+      ],
+      [
+        [lt.lng, lt.lat],
+        [rb.lng, lt.lat],
+        [rb.lng, rb.lat],
+        [lt.lng, rb.lat],
       ]
-
-      const polygon = new AMap.Polygon({
-          pathL: backCovers,
-          strokeWeight: 0,
-          fillColor: '#71B3ff',
-          fillOpacity: 0.5
-      });
-      polygon.setPath(backCovers);
-      map.add(polygon);
-
-      map.on('click',function(e){
-        console.log('--------->', e)
-      })
-    }
-  });
-
-  onMounted(() => {
-    AMapLoader.load({
-      "key": props.amapKey,
-      "version": "2.0",
-      "plugins": [],
-    }).then((AMap)=>{
-      mapState.AMap = AMap;
-    }).catch((e)=>{
-        console.error(e);  //加载错误提示
-    }); 
-  })
+    ]
+
+    const polygon = new AMap.Polygon({
+        pathL: backCovers,
+        strokeWeight: 0,
+        fillColor: '#71B3ff',
+        fillOpacity: 0.5
+    });
+    polygon.setPath(backCovers);
+    map.add(polygon);
+
+    // 限制拖动范围
+    map.setLimitBounds(bounds);
+
+    map.add(newMarker({ position: [118.795993, 31.966611] }))
+
+    map.on('click',function(e){
+      console.log('--------->', e)
+    })
+  };
 </script>
 
 <style lang="less" scoped>
@@ -126,3 +114,11 @@
 }
 
 </style>
+
+<style lang="less">
+.cust-map-marker {
+  width: 60px;
+  height: 20px;
+  background: rgba(255, 0, 0, .5);
+}
+</style>

src/main.js

@@ -1,10 +1,13 @@
 import { createApp } from 'vue'
+import VueViewer from 'v-viewer'
+import 'viewerjs/dist/viewer.css'
 import './style.css'
 import App from './App.vue'
 import store from './store'
 import wxsdk from './utils/wx'
-import 'viewerjs/dist/viewer.css'
-import VueViewer from 'v-viewer'
+import { amapInit } from './utils/amap'
+
+amapInit();
 
 const { share } = wxsdk(location.href)
 

src/style.css

@@ -17,4 +17,13 @@ html, body, #app {
 
 img {
   border: none;
+}
+
+/* 隐藏高德地图 logo */
+.amap-logo{
+  display: none;
+  opacity:0 !important;
+}
+.amap-copyright {
+  opacity:0;
 }

src/utils/amap.js

@@ -0,0 +1,24 @@
+import AMapLoader from '@amap/amap-jsapi-loader';
+
+export function amapInit() {
+  window._AMapSecurityConfig = {
+    securityJsCode: AMAP_SEC_CODE,  // 来源 public/config.js
+  };
+  AMapLoader.load({
+    "key": AMAP_KEY,  // 来源 public/config.js
+    "version": "2.0",
+    "plugins": [],
+  }).then((AMap)=>{
+    window.AMap = AMap;
+  }).catch((e)=>{
+    console.error(e);  //加载错误提示
+  });
+}
+
+export function newMarker(options = {}) {
+  return new AMap.Marker({
+    content: '<div class="cust-map-marker"></div>',  // 自定义点标记覆盖物内容
+    offset: new AMap.Pixel(-30, -10), // 相对于基点的偏移位置
+    ...options
+  });
+}