如何在从服务器接收数据后更新React Google Map

在从服务器接收数据后更新React Google Map，您可以按照以下步骤进行操作：

创建一个React组件，用于显示Google Map，并在该组件的state中添加一个用于存储地图上标记的数组。

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;

在组件挂载时，通过网络请求从服务器获取数据，并将数据存储在组件的state中。

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;

在Google Map上渲染标记。在上述代码中，我们使用了一个Marker组件来渲染标记。您可以根据服务器返回的数据，将标记的位置信息以及其他属性传递给Marker组件。
根据您的需求，可以通过不同的方式对标记进行自定义。例如，您可以为每个标记添加一个点击事件，以便显示更多信息或执行其他操作。

请注意，以上代码中的YOUR_GOOGLE_MAPS_API_KEY应该替换为您自己的Google Maps API密钥，用于使用Google Maps服务。另外，YOUR_API_URL应替换为从服务器获取数据的API端点。

如何在从服务器接收数据后更新React Google Map

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐