2

マーカー付きのGoogleマップを表示しようとしています。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"/>
  }
});

コンソールからの詳細なエラー:

キャッチされていない TypeError: プロパティ k を追加できません。オブジェクトは拡張可能ではありません VM3577:92

キャッチされていない TypeError: プロパティ onerror を追加できません。オブジェクトは拡張可能ではありません main.js:3

キャッチされていない TypeError: プロパティ k を追加できません。オブジェクトは拡張可能ではありません VM3577:92

キャッチされていない TypeError: 未定義の VM3577:69 のプロパティ 'style' を読み取ることができません

キャッチされていない TypeError: プロパティ onerror を追加できません。オブジェクトは拡張可能ではありません

4

1 に答える 1

1

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

ワーキングjsFiddle

于 2014-07-22T16:32:02.470 に答える