在React componant

时间:2016-11-21 06:11:25

标签: javascript api google-maps reactjs state

我正在尝试使用React构建一个小型Google地图应用。

到目前为止一直进展顺利。但我只能用硬编码数据。



import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Map from './components/Map'
import Places from './components/Places'
import superagent from 'superagent'

class App extends Component {
  constructor(){
    super()
    this.state = {
      venues: [],
      location: {
        lat: 40.7575285,
        lng: -73.9884469
      }
    }
  }


  componentDidMount(){
    console.log('component did mount')

    const x = navigator.geolocation

      x.getCurrentPosition(success, failure)

      function success(position) {
        const lat = position.coords.latitude
        const lng = position.coords.longitude
        console.log('LAT!!!!', lat)
        console.log('LNG!!!!', lng)
      }


      function failure() {
        console.log('ERROR')
      }


    const url = 'https://api.foursquare.com/v2/venues/search?v=20140806&ll=40.7575285,-73.9884469&client_id=4RKAP3ZFW34WFK4KXFD4I51PKQRGFMXAZAUQ5V5OETQDDBBA&client_secret=WNROPSU51SPJWCAJZX2QT1KOULYM41SWLKVSJS5PYCKOPVIB'

    superagent
    .get(url)
    .query(null)
    .set('Accept', 'text/json')
    .end((err, response) => {

      const venues = response.body.response.venues
      console.log(JSON.stringify(venues))
      this.setState({
        venues: venues
      })
    })

  }


  render(){

    location: {
      lat: lat,
      lng: lng
    }

    return (
      <div>
        <div style={{width:300, height:600, background:'red'}}>
          <Map center={this.state.location} markers={this.state.venues} />
        </div>
        <Places venues={this.state.venues} />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))
&#13;
&#13;
&#13;

我的问题是,如何使位置状态显示为latlng位置的中心?

感谢您的帮助!

0 个答案:

没有答案