我是React的新手。我试图使用google-map-react在Google地图上显示几个位置。
我正在使用以下资源。
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => <div>{text}</div>;
class GMap extends Component {
static defaultProps = {
center: {
lat: 15.95,
lng: 79.33
},
zoom: 7
};
componentWillMount() {
var locations = [
{lat: 16.16, lng: 80.80, name:'XYZ'},
{lat: 14.14, lng: 77.77, name:'ABC'},
{lat: 13.13, lng: 79.79, name:'CYZ'},
{lat: 13.31, lng: 79.97, name:'EWWE'}];
this.setState({loc:locations});
}
render() {
return (
// Important! Always set the container height explicitly
<div style={{ height: '100vh', width: '100%' }}>
<GoogleMapReact
bootstrapURLKeys={{ key: 'AIzaSyDvsaENyQnSHWWGCI6JnLF8_-65Qv9sJaw' }}
defaultCenter={this.props.center}
defaultZoom={this.props.zoom}
>
<AnyReactComponent
lat={this.state.loc[0].lat}
lng={this.state.loc[0].lng}
text={this.state.loc[0].name}
/>
<AnyReactComponent
lat={this.state.loc[1].lat}
lng={this.state.loc[1].lng}
text={this.state.loc[1].name}
/>
this.state.loc.map(l => {
<AnyReactComponent
lat={l.lat}
lng={l.lng}
text={l.name}
/>
});
));
</GoogleMapReact>
</div>
);
}
}
export default GMap;
当我运行“npm run start”运行我的应用程序时,我收到以下错误。
编译失败。
./ src / GMap.js第48行:'l'未定义no-undef第49行:'l' 未定义no-undef第50行:'l'未定义no-undef
搜索关键字以了解有关每个错误的详情。
我使用下面的代码尝试了与JSFiddle相同的迭代。
class TodoApp extends React.Component {
constructor(props) {
super(props)
this.state = {
loc: [
{lat: 16.16, lng: 80.80, name:'XYZ'},
{lat: 14.14, lng: 77.77, name:'ABC'},
{lat: 13.13, lng: 79.79, name:'CYZ'},
{lat: 13.31, lng: 79.97, name:'EWWE'}
]
}
}
render() {
return (
<div>
<h2>Todos:</h2>
<ol>
{this.state.loc.map(item => (
<li key={item.lat}>
<label>
<input type="checkbox" disabled readOnly checked={item.done} />
<span className={item.lng ? "done" : ""}>{item.name}</span>
</label>
</li>
))}
</ol>
</div>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
工作正常。 你能帮我解决这个错误吗?
答案 0 :(得分:6)
您的.map()
来电并非用大括号括起来。当嵌入JSX中时,它需要是,例如
<div> {this.state.data.map(d => <span>{d}</span>)} </div>
答案 1 :(得分:0)
我使用window.L
解决了与MapQuest API类似的问题,因为L正在使用API加载,所以ESLint表示未声明L。