ReactJS：谷歌地图（给出无效值错误）答案

【问题标题】：ReactJS:Google Map (Giving Invalid Value Error)ReactJS：谷歌地图（给出无效值错误）
【发布时间】：2018-11-08 00:28:10
【问题描述】：

我目前正在处理my reference (ReactJS Google Map)。我在 ReactJS 和 laravel 中制作了这个项目。

我不明白为什么 tomchentw API Json Data 在我的谷歌地图上工作，但是我自己的 API Json Data 给了我错误

Hc {message: "not a LatLng or LatLngLiteral: not an Object", name: "InvalidValueError", stack: "Error↵ at new Hc (https://maps.googleapis.com/m...stanc

InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in 属性 lat：不是数字

tomchentw: API 数据 https://gist.githubusercontent.com/farrrr/dfda7dd7fccfec5474d3/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json

我自己的：API 数据

我的代码：

{props.markers.map(marker => (

    <Marker
      key={marker.id}
      position={{ lat: marker.store_lat, lng: marker.store_long }}
    />
  ))}



 componentDidMount() {

        axios.get('/api/googlemapstore')
        .then(response => {
          this.setState({
              markers: response.data
          })
        })

    }

Tomchentw 代码：

{props.markers.map(marker => (

    <Marker
      key={marker.photo_id}
      position={{ lat: marker.latitude, lng: marker.longitude }}
    />
  ))}


 fetch('https://gist.githubusercontent.com/farrrr/dfda7dd7fccfec5474d3/raw/758852bbc1979f6c4522ab4e92d1c92cba8fb0dc/data.json')
      .then(res => res.json())
      .then(data => {
        this.setState({ markers: data.photos });
      });

【问题讨论】：

标签： reactjs laravel google-maps

【解决方案1】：

这是因为数据中的值是字符串，而不是数字。

你有：

'store_lat': '53.628301'

应该是：

'store_lat': 53.628301

【讨论】：