谷歌地图标记作为 Reactjs 组件

Question

This * question 由@Omar Torres 回答，展示了如何使用 Reactjs 在 Google 地图上放置标记。

Working jsfiddle

我想用一个数组来拉入多个地图标记，我想要“标记”变量：

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

成为一个 React 组件，这样我就可以设置一个键并利用 React 的 diff 算法的全部性能。

这是我的尝试，但不起作用：

/** @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 元素，因为它由谷歌的库控制。

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

在您的示例中，您正在从 componentDidMount 方法调用的 setMarkers 方法中创建 ExampleMarkers。由于这些ExampleMarkers 不是在render 函数中创建的，因此它们的render 方法也不会被执行 它们也不会在ExampleGoogleMap 的后续渲染中被区分。用div 元素包裹标记也不起作用。

标记的所有渲染逻辑都封装在 google 库中，因此我认为除非 google 实现库本身的 react 版本，否则无法将其与 Reacts 算法进行区分。

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