Browse Source

👈 编写高德地图组件

master
wangxiang 3 years ago
parent
commit
eb0f141ead
  1. 40
      kicc-ui/src/components/AMap/src/Amap.vue
  2. 5
      kicc-ui/src/components/AMap/src/data.ts

40
kicc-ui/src/components/AMap/src/Amap.vue

@ -20,9 +20,11 @@ @@ -20,9 +20,11 @@
});
/** 地图创建完成(动画关闭) */
const complete = (): void => {
map && map.on('complete', () => {
if (map) {
map.on('complete', () => {
mapState.loading = false;
});
}
};
onBeforeMount(() => {
@ -59,8 +61,7 @@ @@ -59,8 +61,7 @@
//
map.addControl(
new AMap.MapType({
defaultType: 1,
showRoad: true
defaultType: 0
})
);
});
@ -70,7 +71,7 @@ @@ -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 = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${redFlag}'/>`;
@ -89,20 +90,41 @@ @@ -89,20 +90,41 @@
map.setCenter(lnglat);
});
}
},
renderClusterMarker(ctx) {
const { clusterData, marker, count } = ctx;
const content = `<img width="30px" height="30px" src='${redFlag}'/>`;
marker.setContent(content);
const title = count == 1 ? clusterData[0].title : `上级医检医院数量:${count}`;
marker.setLabel({
direction: 'bottom',
//
offset: new AMap.Pixel(-4, 0),
//
content: `<div>${title}</div>`
});
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;
});
});

5
kicc-ui/src/components/AMap/src/data.ts

@ -13,7 +13,8 @@ type mapType = { @@ -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}
];

Loading…
Cancel
Save