谷歌地图标记作为Reactjs组件

Google Map Marker as Reactjs Component

本文关键字：Reactjs 组件 地图 图标 谷歌      更新时间：2023-10-04

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

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

我走对了吗？

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

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

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

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

解决方案：。检查这个https://github.com/tomchentw/react-google-maps并且please 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>
    );
  }
}

相关文章：