我正在尝试使用谷歌地图显示多个标记并做出反应,但不断收到上述错误。我们的想法是从阵列中的纬线和长线显示多个标记。有什么想法吗?
Codepen:http://codepen.io/anon/pen/evOoNP?editors=0010
class GMap extends React.Component {
state = { zoom: 10 };
static propTypes() {
initialCenter: React.PropTypes.objectOf(React.PropTypes.number).isRequired
}
render() {
return <div className="GMap">
<div className='UpdatedText'>
<p>Current Zoom: { this.state.zoom }</p>
</div>
<div className='GMap-canvas' ref="mapCanvas">
</div>
</div>
}
componentDidMount() {
// create the map, marker and infoWindow after the component has
// been rendered because we need to manipulate the DOM for Google =(
this.map = this.createMap()
this.marker = this.createMarker()
this.infoWindow = this.createInfoWindow()
// have to define google maps event listeners here too
// because we can't add listeners on the map until its created
google.maps.event.addListener(this.map, 'zoom_changed', ()=> this.handleZoomChange())
}
// clean up event listeners when component unmounts
componentDidUnMount() {
google.maps.event.clearListeners(map, 'zoom_changed')
}
createMap() {
let mapOptions = {
zoom: this.state.zoom,
center: new google.maps.LatLng(38, -78)
}
return new google.maps.Map(this.refs.mapCanvas, mapOptions)
}
mapCenters() {
return new google.maps.LatLng(
this.props.initialCenter.lat,
this.props.initialCenter.lng
)
}
mapCenter() {
const navLinks = [
{location: "Bondi Beach", lat: -33.890542, long: 151.274856},
{location: "Coogee Beach", lat: -33.923036, long: 151.259052},
{location: "Cronulla Beach", lat: -34.028249, long: 151.157507}
];
return navLinks.map((b, i) => {
console.log(b)
return new google.maps.LatLng(b.lat, b.long)
})
}
createMarker() {
return new google.maps.Marker({
position: this.mapCenter(),
map: this.map
})
}
createInfoWindow() {
let contentString = "<div class='InfoWindow'>I'm a Window that contains Info Yay</div>"
return new google.maps.InfoWindow({
map: this.map,
anchor: this.marker,
content: contentString
})
}
handleZoomChange() {
this.setState({
zoom: this.map.getZoom()
})
}
}
var initialCenter = { lng: -90.1056957, lat: 29.9717272 }
ReactDOM.render(<GMap initialCenter={initialCenter} />, document.getElementById('container'));