Question

在react组件中的render函数中，如何将marker-details对象传递给已创建的marker？我没有使用任何反应谷歌地图库这是我的初始化函数：

initMap = () => {
  const myCity = { lat: 30.06263, lng: 31.24967 };
  const map = new window.google.maps.Map(document.getElementById('map'), {
  center: myCity,
  zoom: 12
 });
 const infowindow = new window.google.maps.InfoWindow();
 const marker = new window.google.maps.Marker();
 this.setState({ infowindow: infowindow })
 this.setState({ marker: marker })
 this.setState({ map: map })
}

现在，在渲染函数中，我希望能够将标记的数据传递到state.marker，我尝试使用this.state.marker({//my object})但不起作用，因为我需要调用构造函数，我这样做的原因是，我根据这样的过滤列表显示了这些标记

render() {
 const { query, venues } = this.state;
 let showingLocations;
 if (query) {
  const match = new RegExp(escapeRegExp(query), 'i');
  showingLocations = venues.filter(ele => match.test(ele.venue.name));
 } else {
  showingLocations = venues;
 }
 showingLocations.map(ele => {
  const content = `${ele.venue.location.address}`
  //the below code is not working
  this.state.marker({
    position: { lat: ele.venue.location.lat, lng: ele.venue.location.lng },
    map: this.state.map,
    title: ele.venue.name
  });
})
return ( //my view goes here);
}

我试图实例化render函数中的标记，但由于某种原因未在全局窗口中标识google对象

render() {
 const { query, venues } = this.state;
 let showingLocations;
 if (query) {
  const match = new RegExp(escapeRegExp(query), 'i');
  showingLocations = venues.filter(ele => match.test(ele.venue.name));
 } else {
  showingLocations = venues;
 }
showingLocations.map(ele => {
 const content = `${ele.venue.location.address}`
 //also not working
 const marker = new window.google.maps.Marker({
  position: { lat: ele.venue.location.lat, lng: ele.venue.location.lng },
  map: this.state.map,
  title: ele.venue.name
});
   })return(//my view)
}

任何想法如何解决此问题？

如何在渲染函数内部创建Google Map标记（使用reactjs）？

0 个答案: