SetPosition：不是LatLng或LatLngLiteral：属性lat：不是使用React和Google Maps的数字

Question

我试图使用Google地图显示多个标记并作出反应，但不断收到上面提到的错误。这个想法是从数组中的纬线和长线显示多个标记。有什么想法吗？

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

Answer 1

new google.maps.Marker({ 
    position: this.mapCenter(), // here is the problem 
    map: this.map 
}) 

你mapCenter()方法返回坐标的数组，但new google.maps.Marker({})期望单个LatLng被作为position通过。

你需要更新你的createMarker()方法在循环中创建标记，例如：

createMarker() { 
return this.mapCenter().map(point => { 
    return new google.maps.Marker({ 
    position: point, 
    map: this.map 
    }) 
}); 
} 

http://codepen.io/anon/pen/yMLYBa?editors=0010