高德地图封装绘制点居中,批量绘制点居中
2025-09-29 本文已影响0人
泪滴在琴上
function drawPoint(mPoint) {
return mapLoad().then((AMap) => {
let transCoordinate = mPoint;
// 坐标系转换
if(!mPoint.noTransAmap) {
transCoordinate = get_GCJLngLat(mPoint);
}
let marker = {};
let icon;
const pointPosition = [transCoordinate.lng, transCoordinate.lat]; // 缓存点坐标
if(mPoint.lng && mPoint.lat && Number(mPoint.lng) > 0 && Number(mPoint.lat) > 0) {
// 图标配置
if (mPoint.type) {
icon = new AMap.Icon({
size: new AMap.Size(mPoint.type.width, mPoint.type.height),
imageSize: new AMap.Size(mPoint.type.width, mPoint.type.height),
image: mPoint.type.imgUrl
});
} else {
icon = new AMap.Icon({
size: new window.AMap.Size(32, 32),
imageSize: new window.AMap.Size(32, 32),
image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png'
});
}
// 点配置项(新增居中控制参数)
let pointOpitons = {
map: map,
icon: icon,
position: pointPosition,
zIndex: mPoint.zIndex !== undefined
? mPoint.zIndex
: (mPoint.type?.zIndex ?? 100)
};
marker = new AMap.Marker(pointOpitons);
// 扩展数据设置
if (mPoint.extData) {
marker.setExtData(mPoint.extData);
}
// 事件绑定
if (mPoint.type) {
if (mPoint.type.onClick && typeof mPoint.type.onClick === 'function') {
marker.on('click', (e) => mPoint.type.onClick(e.target, null));
}
if (mPoint.type.dblclick && typeof mPoint.type.dblclick === 'function') {
marker.on('dblclick', (e) => mPoint.type.dblclick(e.target, null));
}
}
// 信息窗口
if (mPoint.type?.infowindow) {
let infoWindow = null;
marker.on('mouseover', (e) => {
const width = mPoint.type.infowindow.width ?? "260px";
const height = mPoint.type.infowindow.height ?? "120px";
const content = `
<div style="width: ${width}; height: ${height}; border: 1px solid white; overflow: hidden;">
${mPoint.type.infowindow.content}
</div>
`;
infoWindow = new AMap.InfoWindow({
anchor: 'middle-right',
content: content,
autoMove: false
});
infoWindow.open(map, e.target.getPosition());
});
marker.on('mouseout', () => {
if (infoWindow) infoWindow.close();
});
}
// 新增:自动居中逻辑(单个点)
if (mPoint.autoCenter) {
// 定位到点坐标,支持配置缩放级别(默认保持当前缩放)
map.setCenter(pointPosition);
// 可选:强制设置缩放级别(如需固定大小)
if (mPoint.zoom) {
map.setZoom(mPoint.zoom);
}
}
}
return marker;
});
}
// 新增:批量绘制点并居中显示的方法(用于批量场景)
async function drawPointsBatch(pointList, autoCenter = true) {
const markers = [];
const positions = [];
// 批量绘制所有点
for (const point of pointList) {
const marker = await drawPoint(point);
if (marker.getPosition) { // 确保是有效的Marker实例
markers.push(marker);
positions.push(marker.getPosition());
}
}
// 批量居中逻辑:自动调整视野包含所有点
if (autoCenter && positions.length > 0) {
// 多个点时用setFitView适配所有点范围
if (positions.length === 1) {
// 单个点直接居中
map.setCenter(positions[0]);
} else {
// 多个点时显示全部,添加边距避免贴边
map.setFitView(markers, true, [50, 50, 50, 50]);
}
}
return markers;
}