1

我正在尝试开发类似的东西，但是使用 ReactJS，我正在寻找相关的东西，但只有使用 vanilla 的实现。我检查了这个 [使用 infowindows 添加多个标记（Google Maps API） [尝试将多个 InfoWindows 绑定到 Google Map 上的多个标记并失败

这是我开发的一些代码，但没有成功，它有点复杂，因为它是 MarkerCluster、Markers、InfoWindow 和 Polygons 的组合。

render() {
if(this.state.info === false){
  return(
    <Loader/>
  )
}
else{
  var markCluster = null
  var pools = null
  if(this.state.marks){
    var markerStuff = []
   this.state.marks.map(function(v,i){
     var mark =
      <Marker key={i}
        name={v.subtitle}
        icon={v.icon}
        position={{lat: parseFloat(v.latitud), lng: parseFloat(v.longitud)}}
        onClick={() => this.infoPoint(v)}
        >
        {this.state.isOpen && <InfoWindow onCloseClick={() => this.closeMarker()}>
              <div className="scroll">
              <div className="row">
                <label>Nombre:</label> <span>{this.state.infoPoint.nombre}</span>
                </div>
                <br/>
                <div className="row">
                  <label>Expediente:</label> <span>{this.state.infoPoint.expediente}</span>
                </div>
          </div>
        </InfoWindow>}
        </Marker>
      markerStuff.push(mark)
    },this)
    markCluster = <MarkerClusterer
                      averageCenter
                      gridSize={30}
                    >
                {markerStuff}
            </MarkerClusterer>
  }
  if(this.state.pools){
    var polsOptions = {
      fillColor:'#41a0f4',
      strokeWeight: 1,
      fillOpacity:0.4
    }
   pools =  <Polygon
                paths={this.state.pools}
                options={polsOptions}
                />
    }
    const GettingStartedGoogleMap = withGoogleMap(props => (
      <GoogleMap
        defaultZoom={3}
        center={{lat: 19.435031,lng: -99.167357}}
        ref={props.onMapLoad}
      >
      {markCluster}
      {pools}
      </GoogleMap>
    ));
  return (
    <div className="googleMap">
      <GettingStartedGoogleMap
        containerElement={
          <div style={{ height: `100%` }} />
        }
        mapElement={
          <div style={{ height: `100%` }} />
        }
        center={{ lat: -25.363882, lng: 131.044922 }}
        onMapLoad={this.onMapLoad}
      />
    <MapModule queryIt={this.queryRegs}/>
    </div>
  );
  }
 }
 }

当我调用 onClick 函数时，我会更改状态并设置 InfoWindow 的信息，但碰巧所有标记都显示相同的信息。

infoPoint(e){
  this.setState({isOpen: true,
    infoPoint: e
 })
}
 closeMarker(){
   this.setState({isOpen: false
   })
 }
4

0 回答 0