地图报错

src/components/centerMap.vue

@@ -2,46 +2,27 @@
   <div class="map-center-warp">
     <!-- <img :src="getAssetsFile('images/vsualized/gmmap.png')" class="map-img" /> -->
     <div class="map-pos">
-      <custom-echart-maps :chart-data="chartsData.valData" height="100%" width="100%" :option="chartsData.option" :geo="geoData" :name="mapName" />
+      <custom-echart-maps
+        :chart-data="chartsData.valData"
+        height="100%"
+        width="100%"
+        :option="chartsData.option"
+        :geo="geoData"
+        :name="mapName"
+        @click="mapClick"
+      />
     </div>
-    <section class="line_info" :style="{ '--top': info.show ? '18vh' : '140vh' }">
-      <i class="el-icon-close" @click="handleCloseInfo"></i>
+    <section class="line_info" :style="{ '--top': isShow ? '18vh' : '140vh' }">
+      <i class="el-icon-close" @click="infoHide"></i>
       <section>
         <section class="info_box">
           <div>
             <span>产品名称</span>
-            <span>{{ info.productName }}</span>
+            <span>{{}}</span>
           </div>
           <div>
             <span>产品批次号</span>
-            <span>{{ info.productCode }}</span>
-          </div>
-          <div>
-            <span>产品规格</span>
-            <span>{{ info.specs }}</span>
-          </div>
-          <div>
-            <span>产品类型</span>
-            <span>{{ info.productType }}</span>
-          </div>
-          <div>
-            <span>生产厂家</span>
-            <span>{{ info.info && info.info.manufacturer }}</span>
-          </div>
-          <div>
-            <span>生产时间</span>
-            <span>{{ info.info && info.info.productTime }}</span>
-          </div>
-          <div>
-            <span>终端零售店</span>
-            <span>{{ info.info && info.info.shop }}</span>
-          </div>
-        </section>
-        <section class="route_box">
-          <div v-for="(item, i) in info.info && info.info.route" :key="`route_${i}`" class="route_item">
-            <div class="_circle"></div>
-            <div class="_name">{{ item.name }}</div>
-            <div class="_time">{{ item.time }}</div>
+            <span>{{}}</span>
           </div>
         </section>
       </section>
@@ -55,7 +36,7 @@ var aspectScale = 0.8807505292367753;
 // var iconUrl = 'http://localhost:9529/sub-government-screen-service/src/assets/images/vsualized/home/partbg.png';
 // var iconUrl = getAssetsFile('images/vsualized/gmmap.png').href;
 var iconUrl = getAssetsFile('images/vsualized/gmmap2.png').href;
-
+const isShow = ref(false);
 import geoJsonData from '../components/530926geo.json'; // 根据实际情况调整路径
 let geoData = geoJsonData;
 let mapName = ref('ZJ');
@@ -263,6 +244,15 @@ const chartsData = reactive({
   ],
 });
 
+const mapClick = (data) => {
+  isShow.value = true;
+  console.info('mapClick', data);
+};
+
+const infoHide = () => {
+  isShow.value = false;
+};
+
 onMounted(() => {
   console.info('iconUrl', iconUrl);
 });

src/components/custom-echart-maps/index.vue

@@ -80,6 +80,7 @@ export default {
     }
 
     function onClick(params) {
+      console.info('地图onClick', params);
       emit('click', params);
     }
 

src/utils/echarts.js

@@ -11,6 +11,7 @@ import {
   GaugeChart,
   ScatterChart,
   EffectScatterChart,
+  Geo3DChart,
 } from 'echarts/charts';
 import 'echarts-gl';
 import 'echarts-liquidfill';
@@ -61,6 +62,7 @@ echarts.use([
   GaugeChart,
   ScatterChart,
   EffectScatterChart,
+  Geo3DChart,
 ]);
 
 export default echarts;