react写openlayers地图引入谷歌地图并标点且悬浮显示及点击显示内容

首先，你需要在React项目中安装OpenLayers和Google Maps API：

npm install ol google-maps-react

然后，在React组件中引入OpenLayers和Google Maps API：

import React, { Component } from 'react';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Overlay from 'ol/Overlay';
import 'ol/ol.css';
import { GoogleApiWrapper } from 'google-maps-react';

class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      map: null,
      google: null,
      marker: null,
      overlay: null,
    };
  }

  componentDidMount() {
    const { google } = this.props;
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        center: [0, 0],
        zoom: 2,
      }),
    });
    const marker = new Overlay({
      element: document.getElementById('marker'),
      positioning: 'bottom-center',
      stopEvent: false,
    });
    map.addOverlay(marker);
    this.setState({ map, google, marker });
  }

  handleMapClick = (event) => {
    const { marker, map } = this.state;
    const coordinate = event.coordinate;
    marker.setPosition(coordinate);
    const pixel = map.getPixelFromCoordinate(coordinate);
    const features = map.getFeaturesAtPixel(pixel);
    if (features && features.length > 0) {
      const feature = features[0];
      const content = feature.get('content');
      marker.setOffset([0, -22]);
      marker.getElement().innerHTML = content;
    } else {
      marker.setOffset([0, 0]);
      marker.getElement().innerHTML = '';
    }
  };

  render() {
    const style = {
      width: '100%',
      height: '100%',
    };
    return (
      <div id="map" style={style} onClick={this.handleMapClick}>
        <div id="marker" />
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_API_KEY',
})(MapContainer);

在上面的代码中，我们创建了一个`MapContainer`组件，它包含一个OpenLayers地图和一个Google Maps API。我们在`componentDidMount`生命周期方法中初始化地图和标记。

我们还创建了一个名为`handleMapClick`的事件处理程序，当用户单击地图时，它将显示一个标记，并在标记上显示一个悬浮框，其中包含与点击的特征相关联的内容。我们使用`getFeaturesAtPixel`方法获取单击位置的特征，并从特征中获取`content`属性的值。

最后，我们将`MapContainer`包装在`GoogleApiWrapper`组件中，并传递我们的Google Maps API密钥。这使我们可以轻松地在React应用程序中使用Google Maps API。

这只是一个简单的示例，你可以根据你的需求自定义它。