ios - iPhone 上的谷歌地图看起来与安卓不同

Question

我们正在开发一个与打字稿反应的网络应用程序。使用react-google-maps包我们嵌入了谷歌地图。一切正常，除了地图没有按预期在 iPhone 上显示。我们已经使用过fitBounds，但这在 iphone 上不起作用。这是代码。

import React, { useContext, useRef, useEffect } from 'react';
import { compose, withProps } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import env from '../../utils/env.utils';
import { compileGoogleMapsScriptSrc, silverMapDesign } from '../../utils/misc.utils';
import DrawingManager from 'react-google-maps/lib/components/drawing/DrawingManager';
import { ThemeContext } from 'styled-components';
import Boundry from './polygon';
import { BuildingLocation } from '../../state/tour/tour.types';
import images from '../../utils/img.utils';

const MapLocator = compose(
  withProps({
    googleMapURL: compileGoogleMapsScriptSrc(env.googleApiKey),
    loadingElement: <div />,
    containerElement: <div style={{ height: `100%`, width: `100%` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap,
)(props => {
  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
  // @ts-ignore
  // prettier-ignore
  const { data, allData, center: location, zoomValue: zoom, marker, selected, selectAll, doneDrawing, allowEdit } = props;
  const ref: any = useRef<HTMLElement>(null);
  const { primary: primaryColor } = useContext(ThemeContext);

  useEffect(() => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
    // @ts-ignore
    const bounds = new window.google.maps.LatLngBounds();
    data.forEach((coor: any) => {
      const { lat, lng } = coor;
      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
      // @ts-ignore
      const latLng = new window.google.maps.LatLng(lat, lng);
      bounds.extend(latLng);
      console.log(zoom);
      ref.current?.fitBounds(bounds);
    });
  }, [data]);
  return (
    <GoogleMap
      // defaultZoom={zoom}
      defaultCenter={location}
      defaultOptions={{ styles: silverMapDesign, streetViewControl: false }}
      ref={ref}
    >
      {allData ? (
        allData.map((ele: BuildingLocation[], index: number) => <Boundry data={ele} key={index} />)
      ) : (
        <Boundry data={data} />
      )}
      {allowEdit && (
        <DrawingManager
          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
          // @ts-ignore
          defaultDrawingMode={google.maps.drawing.OverlayType.POLYGON}
          defaultOptions={{
            drawingControl: true,
            drawingControlOptions: {
              // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
              // @ts-ignore
              position: google.maps.ControlPosition.TOP_CENTER,
              // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
              // @ts-ignore
              drawingModes: [google.maps.drawing.OverlayType.POLYGON],
            },
            polygonOptions: {
              strokeColor: primaryColor,
              strokeOpacity: 1,
              strokeWeight: 4,
              fillColor: 'rgba(6, 56, 231, 1)',
              fillOpacity: 0.05,
            },
          }}
          // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
          // @ts-ignore

          onPolygonComplete={doneDrawing}
        />
      )}
      {marker &&
        marker.map((mark: Location, i: number) => {
          return (
            <Marker
              position={mark}
              key={i}
              icon={selectAll || selected === i ? images.blueMapMarker : images.grayMapMarker}
              zIndex={selected === i ? 200 : 100}
            />
          );
        })}
    </GoogleMap>
  );
});

export default MapLocator;

这是 iphone 上当前行为的屏幕截图。

标签： iosreactjsiphonegoogle-mapsreact-google-maps