feat: 添加点标记

src/packages/components/Charts/Maps/MapAmap/config.ts

@@ -3,14 +3,15 @@ import { CreateComponentType } from '@/packages/index.d'
 import { MapAmapConfig } from './index'
 import { chartInitConfig } from '@/settings/designSetting'
 import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
 
 export const option = {
-  dataset: '',
+  dataset: dataJson,
   amapKey: 'aa76ad84f92f661980f710cbe966b7f6',
   amapStyleKey: 'normal',
   amapStyleKeyCustom: '',
-  amapLon: 116.39,
-  amapLat: 40.91,
+  amapLon: 116.397428,
+  amapLat: 39.90923,
   amapZindex: 10,
   viewMode: '2D',
   pitch: 60,

src/packages/components/Charts/Maps/MapAmap/data.json

@@ -0,0 +1,17 @@
+{
+  "points": [
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png",
+      "position": [116.300467, 39.907761],
+      "title": "我是一个文本"
+    },
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png",
+      "position": [116.368904, 39.913423]
+    },
+    {
+      "icon": "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png",
+      "position": [116.305467, 39.807761]
+    }
+  ]
+}

src/packages/components/Charts/Maps/MapAmap/index.vue

@@ -29,6 +29,7 @@ let {
 } = toRefs(props.chartConfig.option)
 
 let map = shallowRef(null)
+let markers = ref([])
 
 const ininMap = () => {
   AMapLoader.load({
@@ -46,7 +47,20 @@ const ininMap = () => {
         features: features.value,
         pitch: pitch.value, // 地图俯仰角度，有效范围 0 度- 83 度
         skyColor: skyColor.value,
-        viewMode: viewMode.value, // 地图模式
+        viewMode: viewMode.value // 地图模式
+      })
+      markers?.value.forEach((marker: any) => {
+        // 创建点实例
+        if (!/\d/.test(marker.icon || marker.position)) {
+          return
+        }
+        var marker = new AMap.Marker({
+          icon: marker?.icon,
+          position: [marker.position[0], marker.position[1]],
+          title: marker?.title,
+          offset: new AMap.Pixel(-13, -30)
+        })
+        marker.setMap(map)
       })
     })
     .catch(e => {})
@@ -55,6 +69,7 @@ const ininMap = () => {
 watch(
   () => props.chartConfig.option,
   newData => {
+    markers.value = newData.dataset.points
     ininMap()
   },
   { immediate: true, deep: true }