无法在 React Google Maps 中旋转地面覆盖 - 属性“轴承”被忽略

Question

我正在使用 lib React Google Maps 来显示地图。我需要放置一个具有固定边界的图像，但它有一个旋转，因为它就像一个建筑物的蓝图。为此，我使用了 GroundOverlay。我的问题是，当我使用轴承属性设置属性选项时，该属性被忽略。它不旋转。

这是我找到轴承属性的地方。 https://developers.google.com/android/reference/com/google/android/gms/maps/model/GroundOverlayOptions#bearing(float)

这是 lib 文档： https://react-google-maps-api-docs.netlify.app/#groundoverlay

这是我的代码：

<LoadScript googleMapsApiKey="API-KEY">
        <GoogleMap mapContainerStyle={containerStyle} center={center} zoom={18}>
            <GroundOverlay
              key={"url"}
              url={planta}
              options={{ bearing: 30 }}
              bounds={{
                north,
                south,
                east,
                west,
              }}
            />
        </GoogleMap>
</LoadScript>

如果有人知道如何旋转该图像，将不胜感激。我需要一个动态的解决方案，而不是针对该特定图像，因为我的想法是从后端渲染它并带有属性轴承。

这是一个活生生的例子，我需要旋转这个图像： https://codesandbox.io/s/compassionate-jackson-ul6ws?file=/src/App.js

谢谢！！

Answer 1

看起来GroundOverlayOptions - bearing property 用于 Android Maps SDK。而GroundOverlay for Maps JavaScript API 没有轴承选项。

我检查了react-google-maps library，你可以改用OverlayView。

要旋转覆盖，您可以使用CSS transform Property 来旋转您的 div。这是sample code 和下面的代码 sn-p：

import React, { Component } from 'react';
import { render } from 'react-dom';
const { compose, withProps, withStateHandlers } = require("recompose");
//const FaAnchor = require("react-icons/lib/fa/anchor");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  OverlayView,
} = require("react-google-maps");

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

const MapWithAnOverlayView = compose(
  withStateHandlers(() => ({
    count: 0,
  }), {
    onClick: ({ count }) => () => ({
      count: count + 1,
    })
  }),
 withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={3}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
  >
    <OverlayView
     bounds={{
         ne: { lat: -34.397, lng: 150.644 },
          sw: { lat: -34.397, lng: 50.644 }
        }}
      //position={{ lat: -34.397, lng: 150.644 }}
      /*
       * An alternative to specifying position is specifying bounds.
       * bounds can either be an instance of google.maps.LatLngBounds
       * or an object in the following format:
       * bounds={{
       *    ne: { lat: 62.400471, lng: -150.005608 },
       *    sw: { lat: 62.281819, lng: -150.287132 }
       * }}
       */
      /*
       * 1. Specify the pane the OverlayView will be rendered to. For
       *    mouse interactivity, use `OverlayView.OVERLAY_MOUSE_TARGET`.
       *    Defaults to `OverlayView.OVERLAY_LAYER`.
       */
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
      /*
       * 2. Tweak the OverlayView's pixel position. In this case, we're
       *    centering the content.
       */
      getPixelPositionOffset={getPixelPositionOffset}
      /*
       * 3. Create OverlayView content using standard React components.
       */
    >
      <div style={{ background: `white`, border: `1px solid #ccc`, padding: 15 , transform: 'rotate(80deg)' }}>
        <h1>OverlayView</h1>
        <img src="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg" />
      </div>
    </OverlayView>
  </GoogleMap>
);



render(<MapWithAnOverlayView />, document.getElementById('root'));