大家好，我正在做一个小型演示项目。我需要制作一个谷歌地图，能够自动搜索位置。我从一个教程中找到了一个代码，它可以做到这一切，但我不能更改宽度和高度。我需要它是小的，像：高度：200px和宽度：200px。
GoogleMap.js
import React, { Component } from 'react';
import {Map, Marker, GoogleApiWrapper} from 'google-maps-react';
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
// for google map places autocomplete
address: '',
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
mapCenter: {
lat: 49.2827291,
lng: -123.1207375
}
};
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
this.setState({ address });
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => {
console.log('Success', latLng);
// update center state
this.setState({ mapCenter: latLng });
})
.catch(error => console.error('Error', error));
};
render() {
return (
<div id='googleMaps'>
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<input
{...getInputProps({
placeholder: 'Search Places ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
<Map
google={this.props.google}
initialCenter={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}}
center={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}}
>
<Marker
position={{
lat: this.state.mapCenter.lat,
lng: this.state.mapCenter.lng
}} />
</Map>
</div>
)
}
}
export default GoogleApiWrapper({
apiKey: ('_MY_API_KEY_')
})(MapContainer)
App.js
import './App.css';
import GoogleMap from './components/GoogleMap';
function App() {
return (
<div className="App">
<h1>Google Maps App</h1>
<GoogleMap />
</div>
);
}
export default App;
我在控制台中有错误，但我不知道他们是否与这个问题有关。
它们在这里：
警告：不建议在严格模式下使用UNSAFE_componentWillReceiveProps，这可能会指示代码中存在错误。看见https://reactjs.org/link/unsafe-component-lifecycles详细信息。
将数据获取代码或副作用移动到componentDidUpdate。
如果您在道具更改时更新状态，请重构代码以使用内存化技术或将其移动到静态getDerivedStateFromProps。了解更多信息，请访问：https://reactjs.org/link/derived-state
请更新以下组件：包装
警告：无法对尚未装入的组件调用setState。这是一个非操作，但它可能表明您的应用程序中存在错误。相反，直接分配给
this.state，或者在Wrapper组件中定义具有所需状态的state = {};类属性。
index.js:1警告：不建议在严格模式下使用UNSAFE_componentWillReceiveProps，这可能会指示代码中存在错误。看见https://reactjs.org/link/unsafe-component-lifecycles详细信息。
将数据获取代码或副作用移动到componentDidUpdate。
如果您在道具更改时更新状态，请重构代码以使用内存化技术或将其移动到静态getDerivedStateFromProps。了解更多信息，请访问：https://reactjs.org/link/derived-state
请更新以下组件：包装
我看到其他人也有这个问题，但他们的解决方案对我没有帮助。非常感谢任何建议！
您可以尝试将映射容器包装在div中，并使用css设置其高度和宽度。我认为这应该工作
只需对脚本创建的div进行一个小的更改。它应该工作
return (
<div id='googleMaps' style="width:200px; height:200px">
<PlacesAutocomplete