Google地图标记为Reactjs组件 [英] Google Map Marker as Reactjs Component

问题描述

这个stackoverflow问题由 @Omar Torres ，展示如何使用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），标题：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。经度} 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％'，$ b $ height：'100％'
}; 
 
 return（
< div className ='map'style = {style}>< / div> 
）; 
} 
}）; 
 $ b 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的元素与React区分开来，因为它由Google的库控制。
 
 
 
以@Omar Tores为例，React不知道标记DOM元素，它只知道在<$ c中呈现的 div 元素$ c> render  方法示例GoogleMap 。所以标记不会在每个重新渲染周期重新渲染。您必须亲自处理 componentDidUpdate 方法中标记的更新。
 
 
 
以您的示例为例，从 componentDidMount 方法调用的 setMarkers 方法中的code> ExampleMarker  。由于这些 ExampleMarker 不是在 render 函数中创建的，它们的 render 方法被执行
，它们也不会在随后呈现 Example GoogleMap 时出现差异。用 div 元素包装标记也不会起作用。  
 
 
标记的所有渲染逻辑封装在谷歌库中，因此我认为用Reacts算法不能区分它，除非谷歌实现了库本身的反应版本。  
This stackoverflow question is answered by @Omar Torres showing how to place a marker on a Google Map using Reactjs.

Working jsfiddle

I'd like to use an array to pull in multiple map markers, and I want the "marker" variable:
var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map});
To be a React Component so I can set a key and take advantage of the full performance of React's diff algo.

Here's my attempt, which isn't working:
/** @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]
);
Am I on the right track?
解决方案
I am not sure there is a way to diff DOM elements of markers with React as that is controlled by google's library.

With example from @Omar Tores, React is not aware of the marker DOM elements, all it knows is the div element rendered in the render method of ExampleGoogleMap. So the markers are not re-rendered at each re-render cycle. You have to handle the updates to markers in the componentDidUpdate method yourself.

With your example, you are creating ExampleMarkers in your setMarkers method which is called from componentDidMount method. Since these ExampleMarkers are not created in the render function, neither their render methods are executed 
nor they are going to be diff'ed at the subsequent renders of ExampleGoogleMap. Also wrapping the marker with a div element will not going to work. 

All rendering logic of a marker is encapsulated within google library, therefore I think it not possible to diff it with Reacts algo unless google implements a react version of the library itself.

                        
这篇关于Google地图标记为Reactjs组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！