将 React 组件插入到 Google 地图信息窗口答案

【问题标题】：Insert React Component to Google maps info window将 React 组件插入到 Google 地图信息窗口
【发布时间】：2020-02-27 14:24:57
【问题描述】：

我创建了一个带有多个标记的谷歌地图。现在我想为每个标记添加一个内容。如果我在字符串中编写所有代码，它工作正常，但在该字符串中加载反应元素时存在问题。

在这个项目中，我们使用 IconUiKit 来显示图标。目标是在信息窗口内添加一个图钉图标。

如果在这里看到与我非常相似的问题 => How to use a react component for showing Google Maps InfoWindow。不幸的是 ReactDOMServer.renderToString() 返回 ReactDOMServer 找不到的错误。

private setMarkers(map: any): any {
  const {stores} = this.state;
  const infowindow = new google.maps.InfoWindow({
    maxWidth: 400
  });
  for (let i = 0; i < stores.length; i++) {  
    if (google.maps.GeocoderStatus.OK === 'OK' && stores[i].store.address && 
       (Number(stores[i].store.address.latitude) !== undefined) && 
       Number(stores[i].store.address.longitude)) {
      let lat = stores[i].store.address.latitude !== undefined ? stores[i].store.address.latitude : 0;
      let lng = stores[i].store.address.longitude !== undefined ? stores[i].store.address.longitude : 0;
      let pos = lat && lng ? new google.maps.LatLng(lat, lng) : {lat: 0, lng: 0};

      let marker = new google.maps.Marker({
        map: map,
        position: pos
      });

      let projectInfo = [] as string[];
      stores[i].projects.forEach(project => {
        projectInfo.push(
          `<p><b>${project.projectNo}</b></p>` +
          '<p>Attribution: Uluru,' + 
            '<a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
              'https://en.wikipedia.org/w/index.php?title=Uluru' + 
            '</a>' +
          '(last visited June 22, 2009).</p>' +
          '<a class="uk-button uk-button-grey uk-button-register uk-width-1-1 uk-text-uppercase" href="/">' +
            '<span>' +
              'Project Details' +
            '</span>' +
          '</a>'
        );
      });
      let icon = <IconUikit icon="gear" wrap={true}/>;
      console.log(icon.toString());

      let contentString = 
        '<div class="maps-tooltip">' +
          '<div class="uk-grid">' +
            '<div class="uk-width-1-4">' +
              `<img src="${stores[i].store.imageUrl}" class="uk-width-1-1"/>` +
            '</div>' +
            '<div class="uk-width-3-4">' +
              `<p><b class="fr-color-black">${stores[i].store.address.name1}</b></p>` +
               /// HERE IS THE COMPONENT
              ReactDOMServer.renderToString(<IconUikit icon="gear" wrap={true}/>) +
            '</div>' +
            '<div class="uk-width-1-1">' +
              `${projectInfo.toString()}` +
            '</div>' +
          '</div>' +
        '</div>';

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.setOptions({
          content: contentString,
        });
        infowindow.open(map, marker);
      });
    }
  }
}

【问题讨论】：

标签： html reactjs typescript google-maps

【解决方案1】：

解决了！

ReactDomServer 是 @types/react-dom 的一部分。而不是调用 ReactDomServer.renderToString() import { renderToString } from 'react-dom/server';只需使用 renderToString().toString()。

【讨论】：