Google maps Google Map Api标记未与Reactjs一起显示

我正在尝试显示带有标记的谷歌地图。我正在使用React.js。地图显示在正确的位置，但标记未显示，并且在浏览器控制台中出现多个“对象不可扩展”错误

代码如下所示

/** @jsx React.DOM */
var Map = React.createClass({
  initialize: function() {
    var lat = parseFloat(this.props.lat);
    var lng = parseFloat(this.props.lon); 
    var myPosition = new google.maps.LatLng(lat,lng);
    var mapOptions = { 
     center: myPosition,
     zoom: 8
    };
    var map = new google.maps.Map(this.getDOMNode(), mapOptions);
    var marker = new google.maps.Marker({position: myPosition, title: 'Hi', map: map});
  },
  componentDidMount: function(){
this.initialize();
  },
  render:function(){
    return <div className="map"/>
  }
});

/**@jsx React.DOM*/
var Map=React.createClass({
初始化：函数（）{
var lat=parseFloat（this.props.lat）；
var lng=parseFloat（this.props.lon）；
var myPosition=new google.maps.LatLng（lat，lng）；
var mapOptions={
中心：我的位置，
缩放：8
};
var map=new google.maps.map（this.getDOMNode（），mapOptions）；
var marker=new google.maps.marker（{position:myPosition，title:'Hi'，map:map}）；
},
componentDidMount:function（）{
这是初始化（）；
},
render:function（）{
返回
}
});

控制台中的详细错误：

未捕获类型错误：无法添加属性k，对象不可扩展VM3577:92

未捕获的TypeError:无法添加属性onerror，对象不是可扩展的main.js:3

未捕获类型错误：无法添加属性k，对象不可扩展VM3577:92

未捕获的TypeError:无法读取未定义的VM3577:69的属性“style”

---

未捕获类型错误：无法添加属性onerror，对象不可扩展

Craig Savolainen对使用Google地图作为React组件有很好的解释，示例的要点如下。我使用以下代码完成了标记渲染：

var ExampleGoogleMap = React.createClass({  
    getDefaultProps: function () {
        return {
            initialZoom: 8,
            mapCenterLat: 43.6425569,
            mapCenterLng: -79.4073126,
        };
    },
    componentDidMount: function (rootNode) {
        var mapOptions = {
            center: this.mapCenterLatLng(),
            zoom: this.props.initialZoom
        },
        map = new google.maps.Map(document.getElementById('react-valuation-map'), mapOptions);
        var marker = new google.maps.Marker({position: this.mapCenterLatLng(), title: 'Hi', map: map});
        this.setState({map: map});
    },
    mapCenterLatLng: function () {
        var props = this.props;
        return new google.maps.LatLng(props.mapCenterLat, props.mapCenterLng);
    },
    render: function () {
        return (
            <div className='map-gic'></div>
        );
    }
});

var ExampleGoogleMap=React.createClass（{
getDefaultProps:函数（）{
返回{
首字母缩放：8，
地图中心：43.6425569，
mapCenterLng:-79.4073126，
};
},
componentDidMount:函数（根节点）{
变量映射选项={
center:this.mapCenterLatLng（），
zoom:this.props.initialZoom
},
map=new google.maps.map（document.getElementById（'react-valuation-map'），mapOptions）；
var marker=new google.maps.marker（{position:this.mapCenterLatLng（），title:'Hi'，map:map}）；
this.setState（{map:map}）；
},
mapCenterLatLng:函数（）{
var props=this.props；
返回新的google.maps.LatLng（props.mapCenterLat，props.mapCenterLng）；
},
渲染：函数（）{
返回(
);
}
});

---

工作

反应支持所有的自闭标签（AFAIK），所以这不应该是一个对我工作的问题-也就是说，我会考虑实际上在组件Dead安装中创建一个新的节点，并将其用于谷歌MAP API（因为它使节点发生突变）。