SetPosition:不是LatLng或LatLngLiteral:在属性lat中:不是使用React和Google Maps的数字

时间:2017-02-23 03:29:42

标签: google-maps reactjs ecmascript-6

我正在尝试使用谷歌地图显示多个标记并做出反应,但不断收到上述错误。我们的想法是从阵列中的纬线和长线显示多个标记。有什么想法吗?

Codepen:http://codepen.io/anon/pen/evOoNP?editors=0010

class GMap extends React.Component {
  state = { zoom: 10 };

  static propTypes() {
    initialCenter: React.PropTypes.objectOf(React.PropTypes.number).isRequired
  }

    render() {
    return <div className="GMap">
      <div className='UpdatedText'>
        <p>Current Zoom: { this.state.zoom }</p>
      </div>
      <div className='GMap-canvas' ref="mapCanvas">
      </div>
    </div>
  }

  componentDidMount() {
    // create the map, marker and infoWindow after the component has
    // been rendered because we need to manipulate the DOM for Google =(
    this.map = this.createMap()
    this.marker = this.createMarker()
    this.infoWindow = this.createInfoWindow()

    // have to define google maps event listeners here too
    // because we can't add listeners on the map until its created
    google.maps.event.addListener(this.map, 'zoom_changed', ()=> this.handleZoomChange())
  }

  // clean up event listeners when component unmounts
  componentDidUnMount() {
    google.maps.event.clearListeners(map, 'zoom_changed')
  }

  createMap() {
    let mapOptions = {
      zoom: this.state.zoom,
      center: new google.maps.LatLng(38, -78)
    }
    return new google.maps.Map(this.refs.mapCanvas, mapOptions)
  }

  mapCenters() {
    return new google.maps.LatLng(
      this.props.initialCenter.lat,
      this.props.initialCenter.lng
    )
  }

  mapCenter() {

    const navLinks = [
        {location: "Bondi Beach", lat: -33.890542, long: 151.274856},
        {location: "Coogee Beach", lat: -33.923036, long: 151.259052},
        {location: "Cronulla Beach", lat: -34.028249, long: 151.157507}
    ];
    return navLinks.map((b, i) => {
      console.log(b)
      return new google.maps.LatLng(b.lat, b.long)
    })
  }

  createMarker() {
    return new google.maps.Marker({
      position: this.mapCenter(),
      map: this.map
    })
    }

  createInfoWindow() {
    let contentString = "<div class='InfoWindow'>I'm a Window that contains Info Yay</div>"
    return new google.maps.InfoWindow({
      map: this.map,
      anchor: this.marker,
      content: contentString
    })
  }

  handleZoomChange() {
    this.setState({
      zoom: this.map.getZoom()
    })
  }
}

var initialCenter = { lng: -90.1056957, lat: 29.9717272 }

ReactDOM.render(<GMap initialCenter={initialCenter} />, document.getElementById('container'));

0 个答案:

没有答案