react-google-maps - 如何从 react-google-maps 的 InfoWindow 中删除“关闭”按钮？

Question

还没有弄清楚如何做到这一点，有没有办法以 css 为目标，或者它是 lib 中的一个选项？

标签： react-google-maps

Answer 1

根据官方文档：

该InfoWindow课程不提供定制。

即使可以覆盖 Google Maps API CSS以隐藏关闭按钮，例如，在这里，推荐的方法是创建一个完全自定义的弹出窗口，如果是react-google-maps库，OverlayView组件是一个很好的选择：

import React from "react";
import { OverlayView } from "react-google-maps";

const getPixelPositionOffset = pixelOffset => (width, height) => ({
  x: -(width / 2) + pixelOffset.x,
  y: -(height / 2) + pixelOffset.y
});

const Popup = props => {
  return (
    <OverlayView
      position={props.anchorPosition}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
      getPixelPositionOffset={getPixelPositionOffset(props.markerPixelOffset)}
    >
      <div className="popup-tip-anchor">
        <div className="popup-bubble-anchor">
          <div className="popup-bubble-content"><h1>{props.content}</h1></div>
        </div>
      </div>
    </OverlayView>
  );
};

演示