1

我正在尝试通过映射数据库中的位置来放置标记。

我认为只需将Marker我映射数据的位置放在内部，然后在两者之间的返回内部调用该变量Map 就可以了，但它没有用。

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

有没有人对为什么会发生这种情况有任何见解？就像，我会采取任何可以提供帮助的信息。

这是我的代码：

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

0 回答 0