如何使用 react 组件来显示 Google Maps InfoWindow

IT技术 reactjs google-maps infowindow
2021-05-19 19:25:12

我的代码如下,我的react应用程序中没有使用任何外部库

import React, { Component } from "react";
import MarkerInfo from "./MarkerInfo";
import { render } from "react-dom";

class Map extends Component {
componentDidMount() {
    this.renderMap();
}

renderMarkerInfo = () => {
    return (
    <div id="markerinfo">
        <h1>THis is info marker</h1>
    </div>
    );
};

renderMap = () => {
    loadScript(
    "https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"
    );
    window.initMap = this.initMap;
};

initMap = () => {
    var uluru = { lat: -25.363, lng: 131.044 };
    var map = new window.google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru
    });

    var contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</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>" +
    "</div>" +
    "</div>";

    var infowindow = new window.google.maps.InfoWindow({
    content: contentString
    });

    var marker = new window.google.maps.Marker({
    position: uluru,
    map: map,
    title: "Uluru (Ayers Rock)"
    });
    marker.addListener("click", function() {
    infowindow.open(map, marker);
    });
};

render() {
    return (
    <div id="map">
        <MarkerInfo />
    </div>
    );
}
}

function loadScript(url) {
    var index = window.document.getElementsByTagName("script")[0];
    var script = window.document.createElement("script");
    script.src = url;
    script.async = true;
    script.defer = true;
    index.parentElement.insertBefore(script, index);
}

export default Map;

当前我正在显示info window硬编码文本,我想使用react组件显示它,我怎么能做到这一点?

我写了另一个组件,每当标记时我想动态显示react组件

提前致谢

1个回答

要考虑的一种选择是:

1)在此阶段创建一个InfoWindow不设置content属性的实例

const infowindow = new window.google.maps.InfoWindow({
      content: ""
});

2) 并 在单击标记后通过函数动态设置更新内容InfoWindow.setContent

marker.addListener("click", () => {
    const content = ReactDOMServer.renderToString(InfoWindowContent);
    infowindow.setContent(content);
    infowindow.open(map, marker);
});

whereInfoWindowContent表示为 React 元素,ReactDOMServer.renderToString函数用于将其呈现为 HTML 字符串,因为InfoWindow.setContent接受内容值作为字符串:

const InfoWindowContent = (
  <div id="bodyContent">
    <p>
      <b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large sandstone
      rock formation in the southern part of the Northern Territory, central
      Australia. It lies 335&#160;km (208&#160;mi) south west of the nearest
      large town, Alice Springs; 450&#160;km (280&#160;mi) by road. Kata Tjuta
      and Uluru are the two major features of the Uluru - Kata Tjuta National
      Park. Uluru is sacred to the Pitjantjatjara and Yankunytjatjara, the
      Aboriginal people of the area. It has many springs, waterholes, rock caves
      and ancient paintings. Uluru is listed as a World Heritage Site.
    </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>
  </div>
);

这是一个演示