Question

我试图通过映射数据库中的位置来放置标记。我正在使用Google Maps React NPM模块渲染地图，并使用React Geocode NPM模块将城市转换为纬度/经度。

我发现只需将Marker放置在我要映射数据的位置内，然后在return内调用该变量即可，但这没有用。

我知道它可以正确转换城市，因为在我登录控制台时，坐标会按预期显示。不知道我在做什么错。

对此将提供任何帮助。

这是我的代码：

import React, {Component} from "react";
import {Map,Marker, GoogleApiWrapper} from "google-maps-react";
import Navbar from "./Navbar";
import {connect} from "react-redux";
import {getVacations} from "./redux";
import Geocode from "react-geocode";

class GoogleMaps extends Component {
    constructor(){
        super();
    }
       componentDidMount = () => {
           this.props.getVacations();
       }

       render() {

        console.log(this.props);
         const mappedCoordinates = this.props.vacations.map(coordinate => {
             Geocode.fromAddress(coordinate.location).then(
                 response => {
                     const { lat, lng } = response.results[0].geometry.location;
                     console.log(lat, lng);
                     <Marker position={{lat: lat, lng: lng}}/>
                 })
         })
         return (
            <div>
                <Navbar/>
                <Map google={this.props.google} zoom={4}>
                {mappedCoordinates}
             </Map>
            </div>
        )
       }
    }

    const connectVaca = connect(state => ({vacations: state}), {getVacations})(GoogleMaps);


export default GoogleApiWrapper({
    apiKey: "<API KEY GOES HERE>"
})(connectVaca)

标记未显示在地图上

0 个答案: