Question

我正在尝试使用ReactJs在Google地图上显示一些标记。

目前我有两个固定的位置（伦敦和巴黎），但后来我想从服务器加载位置，所以我希望它们在单独的组件中处理。

出于某种原因，当我将巴黎渲染成单独的组件时，它会放入地图的角落。我可以移动地图，缩放它，但巴黎仍然在角落里。

这是我的代码：

var center = { lat: 49.1951, lng: 16.6068 };
var zoom = 3;

const K_WIDTH = 40;
const K_HEIGHT = 40;

const greatPlaceStyle = {
    // initially any map object has left top corner at lat lng coordinates
    // it's on you to set object origin to 0,0 coordinates
    position: 'absolute',
    width: K_WIDTH,
    height: K_HEIGHT,
    left: -K_WIDTH / 2,
    top: -K_HEIGHT / 2,

    border: '5px solid #f44336',
    borderRadius: K_HEIGHT,
    backgroundColor: 'white',
    textAlign: 'center',
    color: '#3f51b5',
    fontSize: 16,
    fontWeight: 'bold',
    padding: 4
};

class PlaceMarkers extends React.Component{
    render(){
        return(
            <div style={greatPlaceStyle} lat="48.8566" lng="2.3522">Paris</div>
        )
    }
}

class PlaceBlock extends React.Component{   

    render(){

        return(
            <div>
                <div className="thumbnail ep-map">
                    <GoogleMap defaultCenter={center} defaultZoom={zoom}>
                    <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div>
                    <PlaceMarkers/>
                    </GoogleMap>
                </div>
            </div>
     )
}

我对ReactJs很新，所以它可能很简单？

编辑：

感谢Max我做了一些更改。现在我的标记即使从服务器加载也可以工作（使用axios进行GET）。我没有将每个标记作为单独的组件，而是将我的组件重命名为GoogleMapBlock，让它处理包含标记的地图：

class GoogleMapBlock extends React.Component{   

    constructor(props) {
        super(props);

        this.state = { 
            markers: []
        };
    }

    componentDidMount() {
        axios
        .get(getBaseUrl()+`get`)
        .then((response) => {
            this.setState({
                markers: response.data.markers
            });
        })
        .catch((e) => 
        {
            console.error(e);
        });
    }

    render(){

        var myMarkers = [];
        var count = 1;
        this.state.markers.forEach(function(marker){
            var markerId = "markerId" + count;//marker.key
            myMarkers.push(
                <div id={markerId} style={greatPlaceStyle} lat={marker.position.lat} lng={marker.position.lng}>{marker.title}</div>
            );
            count++;
        });

        return(
                <div className="thumbnail ep-map">
                    <GoogleMap defaultCenter={center} defaultZoom={zoom}>
                    {myMarkers}
                    </GoogleMap>
                </div>
            );
    }
}

Answer 1

这是因为GoogleMap组件需要在其子组件下使用lat和lng道具。如果您查看react dev工具，您会看到google map下有2个组件： - 带lat和lng的div - 没有lat和lng的PlaceMarkers（有lat和lng的div）

您需要明确为PlaceMarkers设置lat和lng道具：

<GoogleMap defaultCenter={center} defaultZoom={zoom}>
  <div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div>
  <PlaceMarkers lat="48.8566" lng="2.3522"/>
</GoogleMap>

React Component是一个视图，因此它不应该用于存储数据（尽管它可能仍然具有视图状态），这就是我们需要道具的原因 - 用数据初始化组件。在您的情况下，我建议选择一个存储框架，如Redux，并在运行时初始化组件：

render() {
  let markers = this.state.markers.map(m => <PlaceMarkers {...m}/>);

  return <GoogleMap defaultCenter={center} defaultZoom={zoom}>
           {markers}
       </GoogleMap>
}

，其中this.state.markers是数组，如[{lat：＆＃34; 48.8566＆＃34;，lng：＆＃34; 2.3522＆＃34 ;, name：＆＃34; London＆＃34;} ，...]

在组件中呈现时标记的位置错误

1 个答案: