谷歌地圖標記爲Reactjs組件

Question

This stackoverflow question由@Omar Torres回答如何使用Reactjs在Google地圖上放置標記。

Working jsfiddle

我想使用一個陣列中的多個地圖標記拉，我想的「標記」的變量：

var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map}); 

要成爲一個陣營組件以便設定一個關鍵並充分利用React差異化的全面表現。

這裏是我的嘗試，這是行不通的：

/** @jsx React.DOM */ 
var ExampleMarker = React.createClass({ 
    render: function() { 
     marker = new google.maps.Marker({position: new google.maps.LatLng(this.props.lat, this.props.lon), title: this.props.mls, map: this.props.map}); 
     return (
      <div>{marker}</div> 
     ); 
    } 
}); 

var ExampleGoogleMap = React.createClass({ 
    getDefaultProps: function() { 
     return { 
      initialZoom: 8, 
      mapCenterLat: 20.7114, 
      mapCenterLng: -157.7964, 
     }; 
    }, 

    componentDidMount: function() { 
     var mapOptions = { 
      center: this.mapCenterLatLng(), 
      zoom: this.props.initialZoom 
     }, 
     map = new google.maps.Map(this.getDOMNode(), mapOptions); 

     this.setMarkers(map); 

     this.setState({map: map}); 
    }, 

    mapCenterLatLng: function() { 
     var props = this.props; 
     return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng); 
    }, 

    setMarkers: function (map) { 

     this.props.markers.forEach(function(marker) { 
      <ExampleMarker mls={marker.mls_no} lat={marker.latitude} lon={listing.longitude} key={marker.mls_no} map={map} />; 
     }.bind(this)); 
    }, 

    componentDidUpdate: function() { 
     var map = this.state.map; 

     map.panTo(this.mapCenterLatLng()); 
    }, 

    render: function() { 
     var style = { 
      width: '100%', 
      height: '100%' 
     }; 

     return (
      <div className='map' style={style}></div> 
     ); 
    } 
}); 

var data = [ 
    { 
     'title' : "marker1", 
     'latitude' : "21.883851754", 
     'longitude' : "-159.465845879" 
    }, 
    { 
     'title' : "marker2", 
     'latitude' : "22.1640990399", 
     'longitude' : "-159.310355405" 
    }, 
    { 
     'title' : "marker3", 
     'latitude' : "22.0855947129", 
     'longitude' : "-159.344410728" 
    } 
]; 


React.renderComponent(
    <ExampleGoogleMap markers={data} />,$('body')[0] 
); 

我在正確的軌道上？

Answer 1

我不確定是否有差異的方法標記爲的DOM元素與React一樣是由google的庫控制的。

以@Omar Tores爲例，React不知道標記DOM元素，它知道div元素在render方法ExampleGoogleMap中呈現。所以標記不會在每個重新渲染週期重新渲染。您必須親自處理componentDidUpdate方法中標記的更新。

以您爲例，您將在setMarkers方法中創建ExampleMarker s方法，該方法從componentDidMount方法調用。由於這些ExampleMarker不是在render函數中創建的，因此它們的render方法都不會在 執行，也不會在隨後的ExampleGoogleMap呈現中被區分。用div元素包裝標記也不會起作用。

標記的所有渲染邏輯封裝在谷歌圖書館，因此我認爲它不可能用反應算法來區分它，除非谷歌實現了庫本身的反應版本。

Answer 2

解決方案：。請檢查此https://github.com/tomchentw/react-google-maps，並請React非常快速地給組件鍵顯示列表/行數據項以幫助做出反應。

//檢查以下

showMapMarkers({markers}){ 
 
    ..use logic below 
 
} 
 

 
class WeatherList extends Component{ 
 

 
renderWeather(cityData, i){ 
 
    const temps = cityData.list.map(weather => weather.main.temp); 
 
    const pressures = cityData.list.map(weather => weather.main.pressure); 
 
    const humidity = cityData.list.map(weather => weather.main.humidity); 
 
    //distructuring 
 
    // const lon = cityData.city.coord.lon; 
 
    // const lat = cityData.city.coord.lat; 
 
    const {lon, lat} = cityData.city.coord; 
 
    return(
 
    <tr key={i}> 
 
     <td><GoogleMap lon={lon} lat={lat} /></td> 
 
     <td><Chart data={temps} color="orange" units="K"/></td> 
 
     <td><Chart data={pressures} color="green" units="hPa"/></td> 
 
     <td><Chart data={humidity} color="blue" units="%"/></td> 
 
    </tr> 
 
); 
 
} 
 
    render(){ 
 
    return (
 
     <table className="table table-hover"> 
 
     <thead> 
 
      <tr> 
 
      <th>City</th> 
 
      <th>Temperature (K)</th> 
 
      <th>Pressure (hPa)</th> 
 
      <th>Humidity (%)</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      {this.props.weather.map(this.renderWeather)} 
 
     </tbody> 
 
     </table> 
 
    ); 
 
    } 
 
}