地图上的标记没有出现 - 反应答案

【问题标题】：Marker on map not appearing - react地图上的标记没有出现 - 反应
【发布时间】：2020-08-22 01:25:59
【问题描述】：

谁能告诉我为什么我的标记没有出现在我的地图上？地图正在显示，但地图上缺少市场。有人可以看看吗？

从“反应”导入反应从“../layout/Default”导入 DefaultLayout 导入'./About.css' 从 'google-maps-react' 导入 {Map, GoogleApiWrapper, Marker};

类关于扩展 React.Component { 渲染（） {

    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” })(关于);

【问题讨论】：

标签： reactjs

【解决方案1】：

您的标记需要在您的地图标签内。

                <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>

【讨论】：