如何设置缩放控制选项？

Question

使用 react-google-maps，我的以下更改缩放位置的选项不起作用

<GoogleMap
defaultZoom={5}
defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }}
options={{
  gestureHandling:'greedy',
  zoomControlOptions:'TOP_RIGHT',
  streetViewControl:false,
  fullscreenControl:false,
}}

>

Answer 1

zoomControlOptions 道具形状来自 react-google-maps 类型定义 (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/googlemaps/index.d.ts):

  /** Options for the rendering of the zoom control. */
  export interface ZoomControlOptions {
    /**
     * Position id. Used to specify the position of the control on the map.
     * The default position is TOP_LEFT.
     */
    position?: ControlPosition;
    style?: ZoomControlStyle;
  }

export enum ControlPosition {
  BOTTOM_CENTER,
  BOTTOM_LEFT,
  BOTTOM_RIGHT,
  LEFT_BOTTOM,
  LEFT_CENTER,
  LEFT_TOP,
  RIGHT_BOTTOM,
  RIGHT_CENTER,
  RIGHT_TOP,
  TOP_CENTER,
  TOP_LEFT,
  TOP_RIGHT
}

这应该有效：

<GoogleMap
  defaultZoom={5}
  defaultCenter={{ lat: 22.845625996700075, lng: 78.9629 }}
  options={{
    gestureHandling:'greedy',
    zoomControlOptions: { position: 9 },
    streetViewControl:false,
    fullscreenControl:false,
  }}
>

google.maps.ControlPosition.TOP_CENTER 的值为 9

如何设置缩放控制选项？

How to set zoom control option?

javascript

reactjs

react-google-maps