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

【问题标题】：Reactjs web app google maps working on PC localhost but not on mobileReactjs 网络应用程序谷歌地图在 PC 本地主机上工作但在移动设备上不工作
【发布时间】：2019-11-22 20:30:06
【问题描述】：

我在 react 上制作的 web 应用程序在 PC 上运行良好，但我最近注意到，当我从手机上的 localhost:3000 打开同一个应用程序时，它并没有打开。正如我提到的它是一个反应应用程序，所以它的一些组件加载例如在给定的图片中，你可以看到我的导航栏、侧边栏和页脚以它们应该打开的方式打开，但中间是谷歌地图应该在，它应该在 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

【问题讨论】：

您有任何错误吗？您是否允许访问您设备上的位置？这是否同时发生在 Android 和 IOS 以及多个浏览器上？
埃文，是的，允许设备访问位置，是的，Android 和 IOS 都在发生这种情况，不，它们没有错误，但我们有很多警告，它们都不是关于这个的特别重要@evan
谢谢，我明白了。那么这可能是一个身高问题。您可以尝试将地图的高度更改为以 px 为单位的某个固定值，例如“500px”而不是“100vh”？
请问有什么更新吗？
我很抱歉@evan 这么晚才回复，这是我的学期项目，提交后我的期末考试开始了，我根本无法编辑我们的代码举个例子，但我相信一旦决赛过去了，我会的......感谢这里的所有帮助，我会尽快再次发表评论并提供更新。

标签： reactjs google-maps react-redux react-router react-google-maps

【解决方案1】：

根据github issue，将版本设置为 3.30 可以解决问题：

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

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

【讨论】：