Google-Map-Api-Marker nicht mit Reactjs

Ich versuche zu zeigen Sie eine google-Karte mit einem marker. Ich bin mit React.js. Die Karte zeigt in die richtige Position, aber der marker nicht angezeigt und ich bekomme mehrere 'Objekt ist nicht erweiterbar,' Fehler in der browser-Konsole

Der code sieht so aus

/** @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"/>
  }
});

detaillierte Fehler-Konsole:

Uncaught TypeError: Can ' T add Eigenschaft k-Objekt ist nicht erweiterbar VM3577:92

Uncaught TypeError: Can ' T add onerror-Eigenschaft, Objekt ist nicht erweiterbar main.js:3

Uncaught TypeError: Can ' T add Eigenschaft k-Objekt ist nicht erweiterbar VM3577:92

Uncaught TypeError: Cannot read property 'Stil' undefined VM3577:69

Uncaught TypeError: Can ' T add onerror-Eigenschaft, Objekt ist nicht erweiterbar

  • reagieren unterstützt self-closing-tags auf alles (AFAIK), so dass sollte kein Problem sein
  • Scheint für mich arbeiten - jsfiddle.net/dw8de, Die sagte, ich würde tatsächlich die Schaffung neuer Knoten im inneren componentDidMount und verwenden, die für die Google Maps API (da mutiert der Knoten).
InformationsquelleAutor mira | 2014-04-29
  1. 1

    Craig Savolainen hat eine schöne Erklärung zur Verwendung von Google Maps als Reagieren Komponente hier, den Kern für das Beispiel ist hier. Ich acomplished der marker-Rendern mit dem folgenden code:

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

    Arbeiten jsFiddle

    InformationsquelleAutor torresomar
Schreibe einen Kommentar