如何用@react-google-maps/api改变绘图管理器的控制位置

Question

我正在尝试更改绘图管理器控制面板的位置（让用户 select 绘制什么形状的那个）。

但是，我在这样做时遇到了困难。

我认为位置值 google.maps.ControlPosition.TOP_CENTER 只是数字。所以根据docs I'm trying to pass in the position object similar to the example here

<DrawingManager
       onLoad={this.handleLoadDrawing}
       drawingMode="rectangle"
       onOverlayComplete={(e)=>console.log(e.overlay.bounds)}
       options={
          {
               position: google.maps.ControlPosition.TOP_CENTER
          }
       }    
/>

我也试过 drawingControlOptions 而不是 options 但没有区别。我究竟做错了什么？我创建了一个 codesandbox here.

Answer 1

我真的不是 React 专家，而且他们似乎无法在官方文档中提供一个工作示例，我不太确定应该如何完成。

我认为官方解决方案在这里：https://react-google-maps-api-docs.netlify.app/#usejsapiloader但我无法让它工作。

到目前为止，我能够使您的上述代码正常工作的唯一方法是执行两件事：1) 将绘图管理器移至单独的组件，以及 2) 在组件中使用 /* global google */。

/* global google */
import React from "react";
import { DrawingManager } from "@react-google-maps/api";

const DrawingComponent = () => {
  const onLoad = (drawingManager) => {
    console.log("drawingManager", drawingManager);
  };

  const onPolygonComplete = (polygon) => {
    console.log("polygoncomplete", polygon);
  };

  return (
    <DrawingManager
      onLoad={onLoad}
      onPolygonComplete={onPolygonComplete}
      options={{
        drawingControl: true,
        drawingControlOptions: {
          position: google.maps.ControlPosition.TOP_RIGHT,
          drawingModes: [google.maps.drawing.OverlayType.POLYGON]
        },
        polygonOptions: { editable: true }
      }}
    />
  );
};

export default DrawingComponent;

工作代码沙箱：https://codesandbox.io/s/quizzical-poitras-i9rg3?file=/src/DrawingCmp.js

如何用@react-google-maps/api改变绘图管理器的控制位置

how to change the control position of the drawing manager with the @react-google-maps/api

javascript

google-maps-api-3

react-google-maps