使用Google Maps和React Js ES6显示多个标记

我能够显示一个标记，但是当我在地图中创建新的google.maps.Marker时，不会返回任何内容。有没有人在此之前进行过设计？代码如下，并附上codepen。使用Google Maps和React Js ES6显示多个标记

Codepen：http://codepen.io/anon/pen/pezqKq?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: this.mapCenter() 
    } 
    return new google.maps.Map(this.refs.mapCanvas, mapOptions) 
    } 

    mapCenter() { 
    return new google.maps.LatLng(
     this.props.initialCenter.lat, 
     this.props.initialCenter.lng 
    ) 
    } 
createMarker() { 
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}, 
     {location: 'Manly Beach', lat: -33.80010128657071, long: 151.28747820854187} 
    ]; 
    navLinks.map((b, i) => { 
      return new google.maps.Marker({ 
      position: new google.maps.LatLng(b.lat, b.long), 
      map: this.map 
      }) 
     console.log(b.long) 
     }) 
    } 

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

来源

2017-02-23 user992731

在createMarker你实际上并没有返回任何东西。您需要退回navLinks.map。您也没有看到该console.log，因为它在地图中的return语句下面。

return navLinks.map((b, i) => { 
    console.log(b.long) 
    return new google.maps.Marker({ 
    position: new google.maps.LatLng(b.lat, b.long), 
    map: this.map 
    }) 
})

来源

2017-02-23 02:25:06

谢谢，安德鲁。仍然没有骰子。 codepen：http://codepen.io/anon/pen/bqbZyW?editors=0010 – user992731

你能澄清一下预期的行为是什么吗？ –

根据阵列中的纬线和长线显示多个标记。 – user992731

使用Google Maps和React Js ES6显示多个标记

回答

相关问题