信息窗口未显示在使用 ReactJS 制作的地图应用程序上

Question

我正在使用 ReactJS 并创建了一个 Google 地图组件，它工作得相当好，但是当我点击时信息窗口没有显示。这与 React 消费事件的方式有关吗？相关代码为：

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    this.infowindow.setContent(place.name);
    this.infowindow.open(map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };

    this.infowindow = new google.maps.InfoWindow();
    service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 },
 render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas">
            </div>
            <ListSorter propertyResults />
        </div>
        );
 }
});

Answer 1

由于某种原因，infoWindow 引用正在丢失。作为权宜之计，一个简单的解决方法是在其他实体上重新设置 infoWindow 的父级。在下面的示例中，我将其重新设置为 window -

var MapContainer = React.createClass({
map: null,
infowindow:null,
createMarker: function(place){
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
    map: this.map,
    position: place.geometry.location
    });
    google.maps.event.addListener(marker, 'click', function() {
    window.infowindow.setContent(place.name);
    window.infowindow.open(this.map, marker);
    });
},
componentDidMount: function(){
    var center = new google.maps.LatLng(this.props.locationProp.lat, this.props.locationProp.lng);
    this.map = new google.maps.Map(this.refs.map_canvas, {center: center, zoom: 15});
    var request = {
        location: center,
        radius: 500,
        types: ['restaurant']
    };
    window.infowindow = new google.maps.InfoWindow();

    var service = new google.maps.places.PlacesService(this.map);
    service.nearbySearch(request, this.mapCallBack);

},
mapCallBack: function(results, status){
console.log(results);
console.log(status);
 if(status === google.maps.places.PlacesServiceStatus.OK){
    this.setState({resultsState: results});
    for (var i = 0; i < results.length; i++) {

        this.createMarker(results[i]);
    }
 }
},
render: function(){
    return(
        <div className="mapAndListContainer">
            <div ref="map_canvas" className="mapCanvas" style={{width:600, height:600}}>
            </div>
        </div>
        );
 }
});

setTimeout(function(){
ReactDOM.render(
    <MapContainer locationProp={{lat:33.808678, lng:-117.918921}}/>,
    document.getElementById('container')
)}, 4000);

信息窗口未显示在使用 ReactJS 制作的地图应用程序上

Infowindow not showing up on map app made using ReactJS

google-maps

reactjs

google-places-api