Question

This stackoverflow question回答了{p> @Omar Torres，其中显示了如何使用Reactjs在Google地图上放置标记。

我想使用数组来引入多个地图标记，我想要＆＃34;标记＆＃34;变量：

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

成为React组件，这样我就可以设置一个键并充分利用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

我不确定是否有办法用React来区分标记的DOM元素，因为它是由google的库控制的。

使用来自@Omar Tores的示例，React不知道标记DOM元素，它只知道在div render方法中呈现的ExampleGoogleMap元素。因此，在每个重新渲染周期中不会重新渲染标记。您必须自己处理componentDidUpdate方法中标记的更新。

在您的示例中，您要在ExampleMarker方法中创建setMarkers，该方法是从componentDidMount方法调用的。由于这些ExampleMarker未在render函数中创建，因此它们的render方法都不会被执行它们也不会在ExampleGoogleMap的后续渲染中产生差异。用div元素包装标记也不会起作用。

标记的所有渲染逻辑都封装在谷歌库中，因此我认为不可能用Reacts algo来区分它，除非谷歌实现了库本身的反应版本。

Answer 2

解决方案：。检查这个https://github.com/tomchentw/react-google-maps并请React非常快速地给出显示列表/行数据项的组件的键，以帮助做出反应。

//检查下面的代码

＆＃13;

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

＆＃13;

Google Map Marker作为Reactjs组件

2 个答案: