如何解决无法在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'));
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。