Google Map Api标记不会与Reactjs一起显示 [英] Google Map Api Marker not showing with Reactjs

问题描述

我试图用标记显示谷歌地图。我正在使用React.js。地图显示在正确的位置，但标记不显示，并且在浏览器控制台中出现多个'object is not extensible'错误

代码如下所示

  / ** @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

未捕获TypeError：无法添加属性onerror，对象不可扩展

这里，这个例子的要点是这里。我使用以下代码创建了标记渲染：

  var示例GoogleMap = 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; 
返回新的google.maps.LatLng（props.mapCenterLat，props.mapCenterLng）; 
}，
 render：function （）{
 return（
< div className ='map-gic'>< / div> 
）; 
} 
}）; 
  

工作 jsFiddle

I am trying to display a google map with a marker. I am using React.js. The map displays in the correct location, but the marker does not show and I get multiple 'object is not extensible' error in the browser console

The code looks like this

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

detailed errors from console:

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

Uncaught TypeError: Cannot read property 'style' of undefined VM3577:69

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

解决方案

Craig Savolainen has a nice explanation on using Google Maps as a React Component here, the gist for the example is here. I acomplished the marker render with the following 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>
        );
    }
});

Working jsFiddle

这篇关于Google Map Api标记不会与Reactjs一起显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！