以位置为中心渲染谷歌地图 OverlayView答案

【问题标题】：Render google maps OverlayView centered on location以位置为中心渲染谷歌地图 OverlayView
【发布时间】：2019-11-07 04:54:19
【问题描述】：

我需要渲染一个以特定位置为中心的按钮，现在我正在使用 OverlayView 来渲染按钮。

    <OverlayView
      position={north}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <MapContextButton
        onClick={e => {
          e.preventDefault();
          console.log('click');
        }}
      />
    </OverlayView>

它会产生以下结果，将叠加层的左上角位置呈现在北点上。有没有办法让它以位置为中心渲染？

【问题讨论】：

标签： reactjs google-maps google-maps-markers react-google-maps

【解决方案1】：

我能够通过使用标记为图标设置锚位置来解决此问题

          <Marker
            position={north}
            icon={{
              url: MapContextIcon,
              anchor: new window.google.maps.Point(16, 16),
            }}
            onClick={() => {
              setIsPopoverOpen(!isPopoverOpen);
            }}
          />

【讨论】：