无法在React Google Maps中旋转地面叠加层-属性“ bearing”被忽略

问题描述

我正在使用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

谢谢！

解决方法

GroundOverlayOptions - bearing property似乎适用于Android Maps SDK。尽管GroundOverlay for Maps JavaScript API没有方位选项。

我选中了react-google-maps library，可以改用OverlayView。

要旋转叠加层，可以使用CSS transform Property旋转div。这是下面的sample code和代码段：

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'));

google-maps react-google-maps reactjs reactjs