map 上的標記未出現 - 反應

Question

有人能告訴我為什么我的標記沒有出現在我的 map 上嗎？ map 正在展示，但 map 缺少市場。 有人可以看看嗎？

從“react”導入 React 從“../layout/Default”導入 DefaultLayout 導入“./About.css” 從“google-maps-react”導入 {Map, GoogleApiWrapper, Marker};

class 關於 extends React.Component { render() {

    const mapStyles = {
        width: '100%',
        height: '100%'
        };

    return (
        <DefaultLayout>
            <h1>About this app</h1>

            <div className="containerabout">
                <section className="aboutcreator">
                    <h2>About the creator</h2>
                    <img className="leftbox" src="/images/charles.jpg" style={{width:230}} alt="picturecharles"/>
                    <ul className="rightbox">
                        <li>26-year old, Belgian national</li>
                        <li>Full-stack JavaScript developer (MERN stack)</li>
                        <li>Background in M&A investment banking</li>
                        <li>Fluent in Dutch, French and English</li>
                        <li>Interests: Football, Cycling, Tennis, Venture Capital</li>
                    </ul>
                </section>

                <section className="locationmap">
                    <h2>Ironhack Amsterdam campus</h2>

                    <Map
                        google={this.props.google}
                        zoom={14}
                        style={mapStyles}
                        initialCenter={{
                                lat: 52.370962,
                                lng: 4.883245
                            }}
                    />

                    <Marker position={{ lat:52.370962, lng:4.883245}}/>

                </section>
            </div>
        </DefaultLayout>
    )
}

}

導出默認 GoogleApiWrapper({ apiKey: "AIzaSyDoNLDrCsLyfbQ7neWyxu_NogjdQ1GNTjM" })(關於);

Answer 1

您的標記需要在 Map 標簽內。

                <Map
                    google={this.props.google}
                    zoom={14}
                    style={mapStyles}
                    initialCenter={{
                            lat: 52.370962,
                            lng: 4.883245
                        }}
                >
                    <Marker position={{ lat:52.370962, lng:4.883245}}/>
                </Map>