如何阻止 Google 地图加载为图块？

Question

我正在使用 @react-google-maps/api 库将 Google 地图嵌入到 React 组件中。然而，我遇到了一个问题，地图图块不仅可见，而且在图块的每个角上都显示不寻常的菱形或星形文物。

我尝试过的：

• 确保地图异步加载以防止性能问题。
• 检查控制台中是否有任何可能表明存在问题的错误 地图的渲染方式
• 调整地图的缩放和中心 属性以查看问题是否在不同级别上持续存在 详细。

import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

function MyMapComponent() {
  return (
    <LoadScript
      googleMapsApiKey="YOUR_API_KEY"
    >
      <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
      >
        {/* Map components here */}
      </GoogleMap>
    </LoadScript>
  );
}

export default MyMapComponent;

有谁知道是什么原因导致瓷砖角处出现这些菱形/星形伪影？任何有关如何修复或调试此问题的建议将不胜感激。

Answer 1

正如 @MrUpsidedown 指出的，我对 CSS 中的所有图像应用了边框半径。我删除了它并解决了问题。