Question

我正在构建一个带有地图标记的地图，其中显示了使用Material-UI Popover组件构建的细节气泡。我的代码在单击时使标记居中，但细节气泡/弹出框仍保留在地图标记居中之前的位置。

这是地图标记居中时的详细气泡/立体化的图片：

Detail Bubble

我已经尝试过将详细信息气泡/弹出框定位如下：

.popover { 
   position: element(#map-marker);
   transform: translateY(-100%);
}

但是它仍然表现相同。我认为弹出框组件无法计算地图标记位置的变化，因为变化是由地图中心的经度/经度值决定的。我只是想不出任何办法来规避这一点。

这是完整的代码：

Map.js

class ShowsMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      detailBubbleAnchorEl: null   // The currently selected marker that the popover anchors to
    }
  }

  handleDetailClose = () => {
    this.setState({
      detailBubbleAnchorEl: null
    })
  }

  handleMarkerClick = (event, lat, lng) => {
    this.setState({
      detailBubbleAnchorEl: event.currentTarget
    })
    // Set center coordinates of map to be those of the map marker (redux action)
    this.props.setSearchCenter({ lat, lng })
  }

 renderMap = () => {
    const { detailBubbleAnchorEl } = this.state;
    const detailOpen = Boolean(detailBubbleAnchorEl);
    const { viewport } = this.props.searchLocation;
    const { zoom } = fitBounds(viewport, { width: 400, height: 600})
    return (
      <GoogleMapReact
        yesIWantToUseGoogleMapApiInternals
        bootstrapURLKeys={{ key: MYAPIKEY }}
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        zoom={zoom + 1}
        center={this.props.searchLocation.center}
        onGoogleApiLoaded={({ map, maps }) => this.handleApiLoaded(map, maps)}
      >
        {
          showLocations.map((location, index) => {
            const { lat, lng } = location;
            return (
              <div lat={lat} lng={lng} key={index}>
                <MapMarker onClick={(event) => this.handleMarkerClick(event, lat, lng)}  />
                <DetailBubble 
                  id="event"
                  open={detailOpen}
                  anchorEl={detailBubbleAnchorEl}
                  onClose={this.handleDetailClose}
                />
              </div>
            )
          })
        }
      </GoogleMapReact>   
    )
  }

  render() {
    return (
      <div ref={map => this.map = map} style={{ width: '100%', height: '100%',}}>
        {this.renderMap()}
      </div>
    );
  }

DetailBubble.js

const DetailBubble = ({ classes, open, anchorEl, onClose, id }) => {
    return(
        <Popover 
            id={id}
            classes={{ paper: classes.container}}
            open={open}
            anchorEl={anchorEl}
            onClose={onClose}
            anchorOrigin={{
                vertical: 'top',
                horizontal: 'center'
            }}
            transformOrigin={{
                vertical: 'bottom',
                horizontal: 'center'
            }}
        >
        </Popover>
    )
}

const styles = theme => ({
    container: {
        position: 'absolute',
        left: 0,
        top: 0, 
        right: 0,
        bottom: 0,
        width: '200px',
        height: '150px'
    }
});

MapMarker.js

const styles = theme => ({
    markerContainer: {
        position: 'absolute',
        width: 35,
        height: 35,
        left: -35 / 2,
        top: -35 / 2,
    },
    marker: {
        fill: '#3f51b5',
        '&:hover': {
            fill: 'blue',
            cursor: 'pointer'
        }
    }
})

function MapMarker({ classes, onClick }) {

    return (
        <div className={classes.markerContainer}>
            <Marker onClick={onClick} className={classes.marker} width={30} height={30} /> 
        </div>
    )
}

在此先感谢您的帮助！

（google-maps-react）当地图中心到标记（LatLng）时，Material-UI弹出框详细信息气泡不会跟随地图标记

0 个答案: