谷歌地图 Api 标记没有与 Reactjs 一起显示答案

【问题标题】：Google Map Api Marker not showing with Reactjs谷歌地图 Api 标记没有与 Reactjs 一起显示
【发布时间】：2014-06-15 13:23:22
【问题描述】：

我正在尝试显示带有标记的谷歌地图。我正在使用 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"/>
  }
});

来自控制台的详细错误：

Uncaught TypeError: Can't add property k, object is not extensible VM3577:92

Uncaught TypeError: Can't add property onerror, object is not extensible main.js:3

Uncaught TypeError: Can't add property k, object is not extensible VM3577:92

未捕获的类型错误：无法读取未定义 VM3577:69 的属性“样式”

Uncaught TypeError: Can't add property onerror, object is not extensible

【问题讨论】：

react 支持所有东西的自闭合标签（AFAIK），所以这应该不是问题
似乎对我有用 - jsfiddle.net/dw8de 也就是说，我会考虑在 componentDidMount 中实际创建一个新节点并将其用于 Google Maps API（因为它会改变节点）。

标签： google-maps google-maps-api-3 google-maps-markers reactjs react-jsx

【解决方案1】：

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

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

工作jsFiddle

【讨论】：