reactjs - 如何在谷歌地图 api / React.js 中“使用组件作为图标”

Question

我不能使用一个组件 -一个简单的组件，只是一个内部带有 h1 的 div 来呈现标记的价格-

我想模仿 AirBnB 的价格图标标记

我已经尝试使用标记图标属性，即使使用 content 属性。

它适用于 infoWindow，但我无法让它适用于图标

https://developers.google.com/maps/documentation/javascript/custom-markers

我试过这个，适用于图像，但不适用于组件

 const markerCreator = coords => {
      const marker = new maps.Marker({
        position: {
          lat: coords.latitud,
          lng: coords.longitud,
        },
        map,
        title: 'Hello World!',
        icon: `${iconBase}parking_lot_maps.png`,
      });
      const infoWindow = new maps.InfoWindow({
        content: ReactDOMServer.renderToString(<Test>{coords.latitud}</Test>),
      });

      marker.addListener('click', function() {
        // map.setZoom(8);
        // map.setCenter(marker.getPosition());
        infoWindow.open(map, marker);
      });
    };

我想渲染一个自定义图标，但它不是图像，而是一个组件，一个简单的 div，里面有一些文本，比如显示价格的 AirBnb 图标。

标签： reactjsgoogle-maps