在从服务器接收数据后更新React Google Map,您可以按照以下步骤进行操作:
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
markers: [],
};
}
render() {
return (
<div style={{ height: '400px', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
defaultCenter={{ lat: 0, lng: 0 }}
defaultZoom={1}
>
{/* Render markers */}
{this.state.markers.map(marker => (
<Marker
key={marker.id}
lat={marker.lat}
lng={marker.lng}
/>
))}
</GoogleMapReact>
</div>
);
}
}
const Marker = () => <div>Marker</div>;
export default MapComponent;
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
class MapComponent extends Component {
constructor(props) {
super(props);
this.state = {
markers: [],
};
}
componentDidMount() {
// 发起网络请求从服务器获取数据
fetch('YOUR_API_URL')
.then(response => response.json())
.then(data => {
this.setState({ markers: data });
})
.catch(error => {
console.error('Error:', error);
});
}
render() {
return (
<div style={{ height: '400px', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'YOUR_GOOGLE_MAPS_API_KEY' }}
defaultCenter={{ lat: 0, lng: 0 }}
defaultZoom={1}
>
{/* Render markers */}
{this.state.markers.map(marker => (
<Marker
key={marker.id}
lat={marker.lat}
lng={marker.lng}
/>
))}
</GoogleMapReact>
</div>
);
}
}
const Marker = () => <div>Marker</div>;
export default MapComponent;
Marker
组件来渲染标记。您可以根据服务器返回的数据,将标记的位置信息以及其他属性传递给Marker
组件。请注意,以上代码中的YOUR_GOOGLE_MAPS_API_KEY
应该替换为您自己的Google Maps API密钥,用于使用Google Maps服务。另外,YOUR_API_URL
应替换为从服务器获取数据的API端点。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云