material-ui 里面有 openlayers 地图的卡片？

Question

我正在尝试将 openlayers 地图放置在 material-ui 卡片组件中。我尝试在卡片文本和卡片媒体部分中放置一个包含地图的 div。

谁能帮我想出把地图放在卡片里的正确方法？

import React, {PropTypes} from 'react'
import {connect} from 'react-redux'
import 'openlayers/dist/ol.css';
import ol from 'openlayers';   
import {Card, CardActions, CardHeader, CardMedia} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';    
import Paper from 'material-ui/Paper'    
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import '../components/tap_events'
import styles from '../styles/ExportInfo.css'
import {updateExportInfo} from '../actions/exportsActions.js';    

class ExportInfo extends React.Component {
    constructor(props) {
        super(props)



    getChildContext() {
        return {muiTheme: getMuiTheme(baseTheme)};
    }
    componentDidMount() {

        this._initializeOpenLayers()
    }
    _initializeOpenLayers() {

        const scaleStyle = {
            background: 'white',
        };


        this._map = new ol.Map({
            controls: [
                new ol.control.ScaleLine(),
                new ol.control.Attribution({
                    collapsible: false,
                    collapsed: false,
                }),
                new ol.control.Zoom({
                    className: styles.olZoom
                })
            ],
            interactions: ol.interaction.defaults({
                keyboard: false,
                altShiftDragRotate: false,
                pinchRotate: false
            }),
            layers: [
                // Order matters here
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                }),
            ],
            target: 'infoMap',
            view: new ol.View({
                projection: "EPSG:3857",
                center: [110, 0],
                zoom: 2.5,
                minZoom: 2.5,
                maxZoom: 22,
            })
        });
    }
    render() {
        const providers = this.props.providers;
        console.log("this is it"+providers[0])
        return (
            <div className={styles.wholeDiv}>
            <div className={styles.root}>    
                    <Paper className={styles.paper} zDepth={2} rounded>
                        <div className={styles.mapCard}>
                            <Card >
                                <CardHeader
                                    title="Selected Area of Interest"
                                    actAsExpander={true}
                                    showExpandableButton={true}
                                />

                                <CardMedia expandable={true}>
                                    <div id="infoMap" className={styles.map} ref="olmap">

                                    </div>

                                </CardMedia>
                            </Card>
                        </div>
                    </Paper>                   
            </div>
            </div>


        )
    }
}



ExportInfo.childContextTypes = {
    muiTheme: React.PropTypes.object.isRequired,
}



export default (ExportInfo)

Answer 1

您的 div (summaryMap) 的 ID 与 olmap 配置 ('infoMap') 中的目标字段不匹配，两者应该相同。

此外，不要在 componentDidMount 中调用 _initializeOpenLayers。我建议使用 ref 回调并使用实际控件而不是字符串初始化目标。

<div id="summaryMap" className={styles.map} ref={olmapDiv => this. _initializeOpenLayers(olmapDiv)}>

</div>

material-ui 里面有 openlayers 地图的卡片？

material-ui card with openlayers map inside?

openlayers

reactjs

material-ui