Google Maps JS自定义图片Marker旋转后被裁剪如何适配边界

1. 初始化Marker时正确配置图标参数 #

取图片宽高的最大值作为边界框的边长，设置正方形边界框容纳任意旋转角度的图片，代码示例如下：

// 优先取图片原始尺寸，避免dom元素尺寸缩放导致计算错误
const imgWidth = currentImage.naturalWidth || currentImage.width;
const imgHeight = currentImage.naturalHeight || currentImage.height;
const maxEdge = Math.max(imgWidth, imgHeight);

const markerIcon = {
    url: currentImage.src + "#" + allMarkers.length,
    // 边界框设为最大边长的正方形
    size: new google.maps.Size(maxEdge, maxEdge),
    // 单张图片无精灵图偏移，origin设为左上角原点
    origin: new google.maps.Point(0, 0),
    // 锚点设为正方形中心，保证旋转时标记的地理位置不偏移
    anchor: new google.maps.Point(maxEdge / 2, maxEdge / 2)
};

const marker = new google.maps.Marker({
    position: mapsMouseEvent.latLng,
    map: map,
    draggable: true,
    icon: markerIcon,
    itemSrc: currentImage.src.replaceAll(window.location.origin, "") + "#" + allMarkers.length,
    id: lat + "," + lng,
    optimized: false // 必须保留，自定义样式需要关闭谷歌地图的默认渲染优化
});

如果需要缩小Marker的显示尺寸，可新增scaledSize参数等比缩放图片，例如要把400200的原图显示为200100的大小，对应修改参数即可：

const displayWidth = 200;
const displayHeight = 100;
const maxEdge = Math.max(displayWidth, displayHeight);
const markerIcon = {
    // ...其他参数不变
    scaledSize: new google.maps.Size(displayWidth, displayHeight)
}

2. 修改旋转函数 #

补充旋转原点配置，和Marker锚点对齐，避免旋转后位置偏移，同时可补充偏移设置让图片在正方形边界框内居中：

function rotate() {
    const images = $("#map").find("img").get();
    // 提前计算好的图片宽高和最大边长，可从marker实例的自定义属性存储读取
    const imgWidth = currentImage.naturalWidth || currentImage.width;
    const imgHeight = currentImage.naturalHeight || currentImage.height;
    const maxEdge = Math.max(imgWidth, imgHeight);
    for (let i = 0; i < images.length; i++) {
        if ($(images[i]).attr("src").replaceAll(window.location.origin, "") === currentMarker.itemSrc) {
            $(images[i]).css({
                'transform': 'rotate(' + currentDeg + 'deg)',
                // 旋转原点设为图片中心，和Marker锚点对齐
                'transform-origin': 'center center',
                // 让图片在正方形边界框内居中
                'position': 'relative',
                'top': `${(maxEdge - imgHeight)/2}px`,
                'left': `${(maxEdge - imgWidth)/2}px`
            });
            break;
        }
    }
}

原理说明 #

CSS旋转属于视觉变换，不会修改元素的实际布局尺寸，默认Marker边界框和原图尺寸一致时，旋转后视觉超出原图尺寸的部分会被容器的overflow: hidden属性裁剪。将边界框设置为宽高最大值的正方形后，任意角度旋转的视觉投影范围都不会超出正方形边界，即可避免裁剪问题。

内容的提问来源于stack exchange，提问作者exceptionsAreBad