Reactjs Web应用程序谷歌地图在PC本地主机上工作但在移动设备上不工作

Question

我在 React 上制作的 Web 应用程序在 PC 上表现出色，但我最近注意到，当我从手机上的 localhost:3000 打开同一个应用程序时，它无法打开。正如我提到的，它是一个 react 应用程序，所以它的一些组件加载，例如在给定的图片中，您可以看到我的导航栏、侧边栏和页脚按照它们应该打开的方式打开，但中间是 google map 应该在，它应该在 PC 上，但在移动设备上却不存在，人们的任何帮助都会有所帮助，因为我们对这件事一无所知。

我们什么也没尝试，因为我们只是不知道这个问题源自何处。

import React,{Component} from 'react';
import { GoogleMap,Marker,InfoWindow } from '@react-google-maps/api';
import {connect} from 'react-redux';
import {mapTypeChangeSync} from '../actions/map';
import donut from "./icons/donut.png";


class GoogleMapWrapper extends Component{


    handleType = () => this.props.mapTypeChangeSync(this.map.getMapTypeId());
    /*
    onLoad = (map) => {
        const elt = document.createElement('p');
        elt.innerHTML = 'maps loadedddd...';
        document.body.appendChild(elt);
        this.map = map;
    }
    */

    render(){
        const {currentLocation,mappedMarkers,onClick,map} = this.props;
        //console.log(donut);
        //console.log('ff',new google.maps.LatLng(24.919988335566842,67.1343894711640));
        if (currentLocation.lat && currentLocation.lng)
            return (
                <GoogleMap mapContainerStyle= {{height: "100vh",
                 width: "100vw" }} center = {currentLocation} zoom = {20}
                 onClick = {onClick? (e) => onClick(e):undefined} 
                 mapTypeId = {map} onMapTypeIdChanged = {this.handleType}
                 onLoad = {map => this.map = map}>

                    <Marker position = {currentLocation} 
                     icon = {{url:donut}} />

                    <InfoWindow position = {currentLocation}>
                        <p>Location Found</p>
                    </InfoWindow>

                    {mappedMarkers.map((marker,i) => (
                        <Marker key = {marker.id?marker.id:i}
                         position = {marker.location}
                         label = {marker.id?marker.id:undefined} />
                    ))}

                </GoogleMap>
                );

        else
            return null;

    }
}

const mapStateToProps = ({currentLocation,objects,map},{cachedMarker}) => {

    const mappedMarkers = objects.map(obj =>({
        id:obj.id,
        location:obj.location
    }));

    console.log('cached Marker:',cachedMarker)

    if (cachedMarker)
        mappedMarkers.push(cachedMarker);

    return {currentLocation,mappedMarkers,map};
}



export default connect(mapStateToProps,
            {mapTypeChangeSync})(GoogleMapWrapper);

this is our normal output app screen this is what we get when we open it on our mobile

Answer 1

根据这个github issue ，将版本设置为 3.30 可以解决问题，如下所示:

<GoogleMapReact
  bootstrapURLKeys={{
    key: process.env.REACT_APP_MAP_KEY,
    v: '3.30',
  }}
/>

就我个人而言，这对我不起作用，但也许对你有用。