我有我的代码如下,我没有在我的反应应用程序中使用任何外部库
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 km (208 mi) " +
"south west of the nearest large town, Alice Springs; 450 km " +
"(280 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组件
提前致谢
要考虑的一个选择是:
1)在此阶段创建InfoWindow
的实例而不设置content
属性:
const infowindow = new window.google.maps.InfoWindow({
content: ""
});
2)并通过InfoWindow.setContent
function动态设置或更新内容,例如点击标记后:
marker.addListener("click", () => {
const content = ReactDOMServer.renderToString(InfoWindowContent);
infowindow.setContent(content);
infowindow.open(map, marker);
});
其中InfoWindowContent
表示为React元素,ReactDOMServer.renderToString
function用于将其呈现为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 km (208 mi) south west of the nearest
large town, Alice Springs; 450 km (280 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>
);
这是一个demo