地图上的标记未显示-反应

时间:2020-05-06 21:55:30

标签: reactjs

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

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

class About扩展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” })(关于);

1 个答案:

答案 0 :(得分:0)

您的标记必须位于Map标记内。

{
          "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
          "data": { "url":"/_sql/myTable"},
          "mark": "circle",
          "encoding": {
            "y": {
              "field": "instant",
              "type": "ordinal",
              "timeUnit": "day",
              "sort": ["mon", "tue", "wed", "thu", "fri", "sat", "sun"]
            },
            "x": {
              "field": "instant",
              "type": "ordinal",
              "timeUnit": "hours"
            },
            "size": {
              "field": "n_pmin",
              "type": "quantitative",
              "aggregate": "avg"
            },
            "color": {
              "field": "n_pmin",
              "type": "quantitative",
              "aggregate": "avg"
            }           
          }
}