2017-02-19 90 views
0

当此代码加载所有我看到的是一个空白的地图。标记(子组件)不是呈现。我试图为按钮创建一个过滤器,但现在让我们忽略,直到我们可以让标记出现。任何输入将不胜感激!阵列不映射

import React from 'react'; 
import {GoogleApiWrapper, Map} from 'google-maps-react'; 
import Marker from '../marker.js'; 
import { Button } from 'react-bootstrap'; 



class Layout extends React.Component { 
    constructor(props){ 
    super(props) 
     this.state = { 
     setFilter: '' 
     } 
    } 

    setFilter(event) { 
    this.setState({ selectedFilter: event.target.name }); 
    } 

    render() { 
    let incidents = [{lat: 32.575258, lng: -117.061613, incident_type: 'ems', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_ems.png'}, 
      {lat: 32.958337, lng: -117.096112, incident_type: 'fire', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_fire.png'}, 
      {lat: 32.728588, lng: -117.100064, incident_type: 'hazmat', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_hazmat.png'}, 
      {lat: 32.556325, lng: -117.055856, incident_type: 'mva', icon:'http://s3-us-west-1.amazonaws.com/et-icons/icon_report_mva.png'}, 
      {lat: 32.691563, lng: -117.072024, incident_type: 'fire', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_fire.png'}, 
      {lat: 32.805941, lng: -117.219577, incident_type: 'ems', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_ems.png' }, 
      {lat: 32.717516, lng: -117.164727, incident_type: 'hazmat', icon:'https://s3-us-west-1.amazonaws.com/et-icons/icon_report_hazmat.png'}, 
      {lat: 32.715218, lng: -117.160156, incident_type: 'mva', icon:'http://s3-us-west-1.amazonaws.com/et-icons/icon_report_mva.png'}] 
    return (
     <div> 
     <div> 
      <Button bsStyle="primary" bsSize="sm" active>EMS</Button> 
      <Button bsStyle="danger" bsSize="sm" active>FIRE</Button> 
      <Button bsStyle="warning" bsSize="sm" active>HAZMAT</Button> 
      <Button bsStyle="info" bsSize="sm" active onClick={this.state.setFilter} name="MVA">MVA</Button> 
     </div> 
      <div ref="map"> 
      <Map google={this.props.google} 
       style={{width: '100%', height: '100%', position: 'relative'}} 
       className={'map'} 
       zoom={10} 
       initialCenter={{lat: 32.7157, lng: -117.1611}}> 
       {incidents.filter((i) => i.incident_type === this.state.selectedFilter).map(i => { 
      <Marker 
       incident_type={i.incident_type} 
       position={{lat: i.lat, lng: i.lng}} 
       icon={i.icon} /> 
      })} 
      </Map> 
      </div> 
     </div> 
    ) 
    } 
} 

export default GoogleApiWrapper({ 
    apiKey: 'AIzaSyB0P-Ql1Gdvu0baPK4xmQMchXxQoUk4YH8' 
})(Layout); 
+0

尝试使用调试器阵列的地图功能看看它是否循环良好,你会得到你所期望的。 –

+0

您使用的是哪个版本的google-maps-react? –

+0

1.0.19是我使用的版本@DamienLeroux –

回答

0

有载,this.state.selectedFilterundefined。结果,incidents.filter((i) => i.incident_type === this.state.selectedFilter)返回一个空数组,并且没有标记生成。

您可以初始化selectedFilter看到至少一个标记:

class Layout extends React.Component { 
    constructor(props){ 
    super(props) 
     this.state = { 
     setFilter: '', 
     selectedFilter: 'fire' 
     } 
    } 
    ... 
} 

或者你可以删除的过滤器,看看如果你看到的标记:

<div ref="map"> 
    <Map google={this.props.google} 
     style={{ width: '100%', height: '100%', position: 'relative' }} 
     className={'map'} 
     zoom={10} 
     initialCenter={{ lat: 32.7157, lng: -117.1611 }}> 
     {incidents.map(i => { 
      <Marker 
       incident_type={i.incident_type} 
       position={{ lat: i.lat, lng: i.lng }} 
       icon={i.icon} /> 
     })} 
    </Map> 
</div>