2017-08-11 39 views
1
import React from 'react'; 
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps'; 

// const googleMapURL = 'https://maps.googleapis.com/maps/api/js?v=3.27&libraries=places,geometry&key=AIzaSyASIGvujxniBb3bX8ZwMHjHbM13Ah6q9X'; 
const Map = props => (
    <GoogleMap 
    defaultZoom={16} 
    defaultCenter={{ lat: 40.6219853, lng: -73.94007739999999 }} 
    > 
    { 
     props.displayed.forEach(device => device.locations.map((location, i) => (
     <Marker 
      key={i} 
      postion={{ lat: location.latitude, lng: location.longitude }} 
      label={device.deviceName} 
     /> 
    ))) 
    } 
    </GoogleMap> 

); 
export default withGoogleMap(Map); 

我不能让我的标志,以显示在地图渲染罚款传递的数据是正确的我的控制台登录它我得到的Web包或控制台没有错误不能让我的标记加载

enter image description here

+0

你有一个错字,太:'postion'也许应该是'position'。 – AKX

+0

感谢改变它,但仍然不工作 –

回答

1

即使你从一个foreach循环内返回,返回值是不确定的。你实际上需要返回一个标记列表来作出反应来渲染它们,所以把它切换到一个地图上,并且所有的东西都应该可以工作。

可以很容易地测试了这一点自己:

var a = [1,2,3]; 
a.forEach(b => b); // returns undefined 
a.map(b => b); // returns [1, 2, 3] 
+0

=>()是返回速记 –

+0

是的,forEach内的映射正在返回,但即使从forEach循环内部返回,它也有一个未定义的返回值。将forEach更改为地图,它应该可以工作。 – Andrew

+0

谢谢你的工作 –