时间戳

首页 > 解决方案 > 标记过多时自定义标记中断

google-maps - 标记过多时自定义标记中断

问题描述

当地图显示几个标记时，一切都很好，但是当显示“太多标记”时，自定义图标会中断，我不知道为什么。任何人都知道如何解决这个问题或能够指出我正确的方向？

这是我用于自定义标记的代码

const getSvg = () => {
    return `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 34">
        <path class="icon__background" fill="#ffc845" d="M14.5 32.7c.5-.5 1.1-1 1.6-1.5 1.6-1.6 3.2-3.2 4.6-4.9 1.7-2 3.1-3.9 4.3-5.7 1.5-2.5 2.4-4.7 2.4-6.5 0-7.1-5.8-12.9-12.9-12.9C7.4 1.1 1.6 6.9 1.6 14c0 1.8.8 4 2.4 6.5 1.1 1.8 2.6 3.7 4.3 5.7 1.5 1.7 3 3.4 4.6 4.9l1.6 1.6zm0-13.4c-2.9 0-5.3-2.4-5.3-5.3s2.4-5.3 5.3-5.3 5.3 2.4 5.3 5.3-2.4 5.3-5.3 5.3z"/>
        <path class="icon__border" fill="#fff" d="M14.5 33.8l-2.1-2.1c-1.6-1.5-3.1-3.3-4.6-4.9-2-2.4-3.4-4.2-4.4-5.8-1.7-2.7-2.5-5-2.5-7 0-3.7 1.4-7.1 4.1-9.7C7.6 1.7 11 .4 14.6.4c7.5 0 13.6 6.1 13.6 13.7 0 1.8-.8 4.1-2.5 6.9-1.4 2.1-2.8 3.9-4.4 5.8-1.4 1.7-3.1 3.4-4.6 4.9l-.8.8c-.3.2-.5.5-.8.7l-.6.6zm-.2-31.9c-3.2 0-6.1 1.2-8.4 3.4-2.3 2.4-3.5 5.4-3.5 8.7 0 1.7.8 3.8 2.3 6.1.9 1.6 2.3 3.3 4.2 5.6 1.5 1.6 3 3.4 4.5 4.8l1.1 1.1.3-.3c.3-.2.5-.5.8-.7 1.6-1.6 3.2-3.2 4.6-4.8 1.5-1.8 2.9-3.7 4.3-5.6 1.5-2.5 2.3-4.5 2.3-6.1 0-6.7-5.5-12.2-12.2-12.2h-.3zm.2 18.2c-3.3 0-6-2.7-6-6.1s2.7-6.1 6-6.1 6 2.7 6 6.1-2.7 6.1-6 6.1zm0-10.7C12 9.4 10 11.5 10 14s2.1 4.6 4.5 4.6c2.5 0 4.5-2.1 4.5-4.6s-2-4.6-4.5-4.6z"/>
        </svg>`;
};
const svgUrl = 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(getSvg());

标签： google-mapsgoogle-maps-api-3

解决方案

从 svg 更改为 png 解决了这个问题。

推荐阅读