地图新增icon

src/views/about/index.vue

@@ -3,7 +3,7 @@
     <div class="mr-auto ml-auto w500 h400 relative">
       <img
         id="bg"
-        style="width: 700px; height: 690px"
+        style="width: 877px; height: 867px"
         src="http://www.bigemap.com/map_source/satel/small/14.png"
       />
       <canvas width="877" height="968" id="fuzhou"></canvas>
@@ -73,6 +73,44 @@ const renderMap = () => {
       //     Alaska: [20, -20],
       //   }
       // },
+      // {
+      //   type: "map",
+      //   aspectScale: 1, // 横向拉伸
+      //   tooltip:{},
+      //   zoom: 1, //缩放比例
+      //   roam: true, // 地图操作 开启缩放或者平移，可以设置成 'scale' 或者 'move'。
+      //   map: "fj",
+      //   nameMap: "福建地图",
+      //   label: {
+      //     show: true,
+      //     normal: {
+      //       show: false, // 默认地图文字字号和字体颜色
+      //       fontSize: 10,
+      //       color: "#ffffff",
+      //     },
+      //     emphasis: {
+      //       show: true,
+      //       fontSize: 10, // 选中地图文字字号和字体颜色
+      //       color: "#CFCFCF",
+      //     },
+      //   },
+      //   itemStyle: {
+      //     areaColor: "#188df0",
+      //     opacity: 0.7,
+      //     borderColor:"#fff",
+      //     borderWidth:2,
+      //     emphasis: {
+      //       areaColor: "#2378f7", // 高亮时候地图显示的颜色
+      //       borderWidth: 0, // 高亮时的边框宽度
+      //     },
+      //   },
+      //   layoutSize: 100,
+      //   top: 0,
+      //   left: 0,
+      //   textFixed: {
+      //     Alaska: [20, -20],
+      //   },
+      // },
       {
         type: "map",
         aspectScale: 1, // 横向拉伸
@@ -104,7 +142,8 @@ const renderMap = () => {
             borderWidth: 0, // 高亮时的边框宽度
           },
         },
-        layoutSize: 100,
+        layoutCenter: ['50%', '44.5%'],
+        layoutSize: 877,
         top: 0,
         left: 0,
         textFixed: {
@@ -114,36 +153,40 @@ const renderMap = () => {
     ],
     series: [
       {
-        type: "effectScatter",
-        map:'fj',
+        type: "scatter",
         coordinateSystem: "geo",
-        data:[{
-          name:"福州",
-          
-
-        }],
-        symbolSize: 12,
-        symbol:'circle',
-        top:0,
-        left:0,
+        symbol: "pin",
+        legendHoverLink: true,
+        symbolSize: [60, 60],
+        // 这里渲染标志里的内容以及样式
         label: {
-          normal: {
-            show: false,
-          },
-          emphasis: {
-            show: false,
-          },
+            show: true,
+            formatter(value) {
+                return value.data.value[2];
+            },
+            color: "#fff",
         },
+        // 标志的样式
         itemStyle: {
-          normal: {
-            shadowBlur: 10,
-            color: "#ff4400",
-          },
-          emphasis: {
-            borderColor: "#fff",
-            borderWidth: 1,
-          },
+            normal: {
+                color: "rgba(255,0,0,1)",
+                shadowBlur: 2,
+                shadowColor: "D8BC37",
+            },
+        },
+        // 数据格式，其中name,value是必要的，value的前两个值是数据点的经纬度，其他的数据格式可以自定义
+        // 至于如何展示，完全是靠上面的formatter来自己定义的
+        data: [
+            { name: "西藏", value: [91.23, 29.5, 2333] },
+            { name: "黑龙江", value: [128.03, 47.01, 1007] },
+            { name: "福州", value: [119.1747, 26.0427, 1007] },
+        ],
+        showEffectOn: "render",
+        rippleEffect: {
+            brushType: "stroke",
         },
+        hoverAnimation: true,
+        zlevel: 1,
       },
     ],
   };