谷歌地图标记作为 Reactjs 组件

IT技术 javascript google-maps google-maps-api-3 reactjs
2021-05-01 06:43:16

@Omar Torres回答了这个 stackoverflow 问题，展示了如何使用 Reactjs 在 Google 地图上放置标记。

工作 jsfiddle

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

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

我在正确的轨道上吗？

2个回答

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

与例如从@Omar Tores，阵营没有意识到标记DOM元素，所有它知道的是div在所呈现的元素render的方法ExampleGoogleMap。所以标记不会在每个重新渲染周期重新渲染。您必须自己处理componentDidUpdate方法中标记的更新。

在您的示例中，您正在从方法调用的方法中创建ExampleMarkers 。由于这些s 不是在函数中创建的，它们的方法既不会被执行，也不会在. 用元素包裹标记也不会起作用。setMarkerscomponentDidMountExampleMarkerrenderrenderExampleGoogleMapdiv

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

解决方案： 。检查这个 https://github.com/tomchentw/react-google-maps并且请React非常快地为显示列表/行数据项的组件提供键以帮助做出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>
    );
  }
}

其它你可能感兴趣的问题
上一篇在 ReactJs 中更新组件更新时更新 jQuery slick carousel 下一篇React Native - 如何使 ScrollView 组件的垂直滚动条永久化？