Question

我正在尝试在我的应用中添加特定地理位置的Google地图。位置可以更改，因此不能进行硬编码。

我的地图组件如下（删除了不相关的内容）：

import React from 'react';

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: this.props.selectedVenue.lat,
      lng: this.props.selectedVenue.lng,
      zoom: 13,
      maptype: 'Satellite”',      
    }
  }

  componentDidMount() {
    let map = new window.google.maps.Map(document.getElementById('map'), {
      center: {lat: this.state.lat, lng: this.state.lng },
      zoom: 13,
      mapTypeId: 'roadmap',
    });

  }

  render() {
    console.log("this.props.selectedVenue.lat", this.props.selectedVenue.lat);
    console.log("this.props.selectedVenue.lng", this.props.selectedVenue.lng);    
    return (
      <div id='app'>
        <div id='map' />
      </div>
    ); 
  } 
}

export default Map;

当我将值硬编码为Map.js的状态时，一切正常，并且地图出现。但是，当我使用上面的方法时，剩下的是空白地图。这些值通过了，但是控制台告诉我：

“ InvalidValueError：setCenter：不是LatLng或LatLngLiteral：在属性lat中：不是数字”

我尝试使用Number（）来确保它实际上是一个数字，Math.round来确保它与位数无关，并尝试完全绕过状态并直接将prop传入没运气。我尝试在这里进行搜索，但是在提出问题的地方还没有令人满意的答案（如果我对此有误，很高兴予以纠正）。

知道我要去哪里哪里吗？

谢谢

*编辑/其他*

this.props.selectedVenue最初是在搜索场所时在祖父母组件（App.js）的状态下设置的。返回的场所选择存储在状态中：

  constructor(props) {
    super(props);

this.state = {
  ...
  venues : [],
  selectedVenue : []
  ...
}

this.search = this.search.bind(this);
this.populateSelectedVenue = this.populateSelectedVenue.bind(this);

}

  search(term) { 
    this.setState({
      ...
      venues : [],
      selectedVenue : [],
      ...
    })

    APIVenues.getVenues(term).then(res => { // getVenues
      this.setState({venues: res});
    });
  }

和另一种方法用于在适当的地点设置this.state.selectedVenues：

  populateSelectedVenue = (venue) => { concat
    this.setState({selectedVenue: venue});
  }

populateSelectedVenue作为道具传递给另一个组件，在该组件中，它由onClick触发，并将适当的场所传递给其中。

Answer 1

您需要在componentWillReceiveProps组件中使用Map生命周期方法。每次传递到组件的所有道具都更改后，此方法将称为每次。

因此，解决方案是：

在componentDidMount生命周期方法中，使用状态值新建一个default纬度和经度的google map对象，并将上面的新map对象设置为成员变量在Map组件中，仅用于保留对象的引用。

componentDidMount() { this.map = new window.google.maps.Map(document.getElementById('map'), { center: { lat: this.state.lat, lng: this.state.lng }, zoom: 13, mapTypeId: 'roadmap', }); }

在componentWillReceiveProps(nextProps)生命周期方法中，使用nextProps参数设置地图中心。

componentWillReceiveProps(nextProps) { if (nextProps.selectedVenue.lat !== this.props.selectedVenue.lat || nextProps.selectedVenue.lng !== this.props.selectedVenue.lng) { this.map.setCenter({lat: nextProps.selectedVenue.lat, lng: nextProps.selectedVenue.lng}); } }

在React JS中将纬度和经度作为道具传递的最佳方法

1 个答案: