Reactjs 网络应用程序 google 映射可在 PC localhost 上工作但不能在移动设备上工作
Reactjs web app google maps working on PC localhost but not on mobile
我在 React 上开发的 Web 应用程序在 PC 上一直运行良好,但我最近注意到,当我从 phone 上的 localhost:3000 打开同一个应用程序时,它无法打开。正如我提到的,它是一个 React 应用程序,因此它的一些组件会加载,例如在给定的图片中,您可以看到我的导航栏、侧边栏和页脚按照它们应该打开的方式打开,但在中间是 google 地图应该是,它应该在 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
根据这个github issue,将版本设置为 3.30 解决了这样的问题:
<GoogleMapReact
bootstrapURLKeys={{
key: process.env.REACT_APP_MAP_KEY,
v: '3.30',
}}
/>
就我个人而言,这对我不起作用,但也许对你有用。
我在 React 上开发的 Web 应用程序在 PC 上一直运行良好,但我最近注意到,当我从 phone 上的 localhost:3000 打开同一个应用程序时,它无法打开。正如我提到的,它是一个 React 应用程序,因此它的一些组件会加载,例如在给定的图片中,您可以看到我的导航栏、侧边栏和页脚按照它们应该打开的方式打开,但在中间是 google 地图应该是,它应该在 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
根据这个github issue,将版本设置为 3.30 解决了这样的问题:
<GoogleMapReact
bootstrapURLKeys={{
key: process.env.REACT_APP_MAP_KEY,
v: '3.30',
}}
/>
就我个人而言,这对我不起作用,但也许对你有用。