Question

我试图使用Google Maps React库初始化Google Maps的

im 并希望每次我根据纬度和经度状态搜索位置时地图都会更改。但是，我收到一条错误消息，说提供给Google地图的无效道具中心会做出反应。由于某些原因，当我输入数字而不是this.state时，它可以工作。状态...有人可以帮忙吗？

App.js

 import React, { Component } from 'react';
    import axios from "axios";
    import './App.css';
    import PlacesAutocomplete from 'react-places-autocomplete'
    import { geocodeByAddress, geocodeByPlaceId, getLatLng } from 'react-places-autocomplete'
    import UserForm from "./components/UserForm.js";

    import Super from "./components/super.js";


    import MapContainer from './components/Map.js'
    import Map from './components/Map.js';
    import { classnames } from './components/helpers';

    const google = window.google;



    class App extends Component {
     constructor() {
        super();
        this.state = {
          zoom: 13,
          maptype: 'roadmap',
          place_formatted: '',
          place_id: '',
          place_location: '',
          address: '',
          latitude: '37.774929',
          longitude: '-122.419416'

        };
      }

    <div>
    <Map center= {{lat: this.state.latitude, lng: this.state.longitude}}
          />
              <div>

        );
      }
    };

export default App;

Map.js

import React, { Component } from 'react'
import GoogleMapReact from 'google-map-react'
import marker from './marker.png'

import {geolocated} from 'react-geolocated';
const AnyReactComponent = ({ text }) => <div><img src={marker} style={{height:'50px',width:'50px'}}/></div>;
export default class Map extends Component {

  static defaultProps = {

    zoom: 11
  }
render() {
    return (
      <div className='google-map' style={{width: '100%',height: '400px',backgroundColor: 'grey'}}>
        <GoogleMapReact
          center={ this.props.center }
          defaultZoom={ this.props.zoom }>
          <AnyReactComponent
            lat={ this.props.center.lat}
            lng={ this.props.center.lng }
            text={ '' }
          />

        </GoogleMapReact>

      </div>
    )
  }
}

Answer 1

您不应用引号将latitude和longitude换行。当您用引号''包装它们时，它会转换纬度，将经度键入number到string。因此，您的纬度，经度属性应该像这样

latitude: 37.774929,
longitude: -122.419416

代替

    latitude: '37.774929',
    longitude: '-122.419416'

所以您声明应该关注

        this.state = {
          zoom: 13,
          maptype: 'roadmap',
          place_formatted: '',
          place_id: '',
          place_location: '',
          address: '',
          latitude: 37.774929,
          longitude: -122.419416

        };

提供给`GoogleMap`的道具'center'无效。 React.js

1 个答案: