diff --git a/kicc-ui/src/components/AMap/src/Amap.vue b/kicc-ui/src/components/AMap/src/Amap.vue index 568dd9b3..aa99f345 100644 --- a/kicc-ui/src/components/AMap/src/Amap.vue +++ b/kicc-ui/src/components/AMap/src/Amap.vue @@ -20,9 +20,11 @@ }); /** 地图创建完成(动画关闭) */ const complete = (): void => { - map && map.on('complete', () => { - mapState.loading = false; - }); + if (map) { + map.on('complete', () => { + mapState.loading = false; + }); + } }; onBeforeMount(() => { @@ -59,8 +61,7 @@ // 地图类型切换插件 map.addControl( new AMap.MapType({ - defaultType: 1, - showRoad: true + defaultType: 0 }) ); }); @@ -70,7 +71,7 @@ gridSize: 80, maxZoom: 14, renderMarker(ctx) { - let { marker, data } = ctx; + const { marker, data } = ctx; if (Array.isArray(data) && data[0]) { const { title, orientation } = data[0]; const content = ``; @@ -89,20 +90,41 @@ map.setCenter(lnglat); }); } + }, + renderClusterMarker(ctx) { + const { clusterData, marker, count } = ctx; + const content = ``; + marker.setContent(content); + const title = count == 1 ? clusterData[0].title : `上级医检医院数量:${count}`; + marker.setLabel({ + direction: 'bottom', + //设置文本标注偏移量 + offset: new AMap.Pixel(-4, 0), + //设置文本标注内容 + content: `
${title}
` + }); + marker.setOffset(new AMap.Pixel(-18, -10)); + marker.on('click', ({ lnglat }) => { + //设置地图层级 + map.setZoom(16); + map.setCenter(lnglat); + }); } }); - + largeHospitalMarkerCluster.on('click', (data) => { + console.log('数据查看:',data); + }); const largeHospitalPoints = largeHospitalMapList.map((v: any) => ({ lnglat: [v.lng, v.lat], ...v })); + largeHospitalMarkerCluster?.setData(largeHospitalPoints); - if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints); - + // 加载完毕 complete(); - }).catch(() => { + }).catch(error => { mapState.loading = false; - throw '地图加载失败,请重新加载'; + throw error; }); }); diff --git a/kicc-ui/src/components/AMap/src/data.ts b/kicc-ui/src/components/AMap/src/data.ts index a8587805..793e4095 100644 --- a/kicc-ui/src/components/AMap/src/data.ts +++ b/kicc-ui/src/components/AMap/src/data.ts @@ -13,7 +13,8 @@ type mapType = { }; export const largeHospitalMapList: mapType[] = [ - {title: '上级医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623}, - {title: '上级医院:测试2', orientation: 0, lng: 114.71, lat: 34.5394614} + {title: '上级医检医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623}, + {title: '上级医检医院:测试2', orientation: 0, lng: 112.919165, lat: 28.289924}, + {title: '上级医检医院:测试3', orientation: 0, lng: 112.919165, lat: 29.289924} ];