将图像添加到 react-google-maps InfoWindow 内容

Question

注意：我正在使用“react-google-maps”api，这就是我当前 InfoWindow 的设置方式

{showingInfoWindow && selectedPlace === spot._id && <InfoWindow
            className="info-window"
            onCloseClick={onInfoWindowClose}
            position={{lat: spot.lat, lng: spot.lng}}
            >
              <div className="iw-container">       
                <strong className="iw-title">{spot.name}</strong>
                <div className="iw-content">
                <a href={'https://maps.google.com/?ll=' + spot.lat + ',' + spot.lng} target= "_blank" className="iw-subTitle">{spot.location}</a>
                  <div>Added By: {currentUser.displayName === spot.user ? "Me" : spot.user}</div>
                  <div>{spot.type}</div>
                  <div>{spot.desc}</div>
                  <div>{moment(spot.createdAt).format("MMM Do YYYY")}</div>
                  {/* <img src={`/server/uploads/${spot.createdAt.split('.')[0]+"Z"}.jpg`}> </img> */}
                </div>
              </div>
              </InfoWindow>}

我想知道如何将图像添加到信息窗口，我在其他 api 中看到它是通过内容道具完成的，并且 react-google-maps 文档有一个prop 用于更新内容，但我找不到如何在他们的文档中设置内容。感谢您的帮助！

Answer 1

您可以直接添加 <img> 标签作为 <infowindow>

的子标签

Sample code 片段：

import React, { Component } from 'react';
import {
  withGoogleMap,
  GoogleMap,
  Marker,
  InfoWindow
} from 'react-google-maps';


class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false
    };
  }

  handleToggleOpen = () => {
    this.setState({
      isOpen: true
    });
  };

  handleToggleClose = () => {
    this.setState({
      isOpen: false
    });
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={{ lat:  -33.86882, lng: 151.209296 }}
        defaultZoom={13}
      >
        <Marker
          key={this.props.index}
          position={{  lat:  -33.86882, lng: 151.209296 }}
          onClick={() => this.handleToggleOpen()}
        >
          {this.state.isOpen && (
            <InfoWindow
              onCloseClick={this.props.handleCloseCall}
            >
             <img src="https://www.australia.com/content/australia/en/places/sydney-and-surrounds/guide-to-sydney/jcr:content/mainParsys/imagecontainer/imageContainerParsys/imagehighlights_835593945/ImageTile/imageHighlightsSrc.adapt.740.medium.jpg" width="250px" height="250px"/>
            </InfoWindow>
          )}
        </Marker>
      </GoogleMap>
    ));

    return (
      <div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: '500px' }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;

Answer 2

我发现问题了：我需要使用一个自动关闭的 img 标签。

而不是

<img src="..."> </img>

一定是

<img src="..."/>

将图像添加到 react-google-maps InfoWindow 内容

Adding an image to react-google-maps InfoWindow content

image

google-maps

infowindow

react-google-maps