无法加载我的标记

时间:2017-08-11 03:12:25

标签: html reactjs

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);

我无法使用我的标记来显示地图呈现正常传入的数据是正确的我有控制台记录它我在网络包或控制台中没有错误

enter image description here

1 个答案:

答案 0 :(得分:1)

即使从forEach循环中返回,返回值也是未定义的。你实际上需要返回一个标记列表以作出反应来渲染它们,所以将forEach切换到一个地图,一切都应该有效。

很容易自己测试一下:

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