markerwithlabel沒有顯示在流星雨上谷歌地圖

Question

markerwithlabel沒有顯示在谷歌地圖上流星雨。我正在使用dburles：google-maps和markerwithlabel v1.1.9。我不能似乎能夠與dburles整合：谷歌地圖和我放在markerwithlabel.js公用文件夾

在我有這樣的錯誤

Uncaught TypeError: google.maps.MarkerWithLabel is not a function

GoogleMap.jsx

Map = React.createClass({ 

    propTypes: { 
    name: React.PropTypes.string.isRequired, 
    options: React.PropTypes.object.isRequired 
    }, 

    componentDidMount() { 

    GoogleMaps.create({ 
     name: this.props.name, 
     element: React.findDOMNode(this), 
     options: this.props.options 
    }) 

    GoogleMaps.ready(this.props.name, function(map) { 
     var marker = new google.maps.MarkerWithLabel({ <-----------ERROR 
     position: map.options.center, 
     map: map.instance, 
     zoom: 8 
     }) 
    }) 
    }, 

    componentWillUnmount() { 
    if (GoogleMaps.maps[this.props.name]) { 
     google.maps.event.clearInstanceListeners(GoogleMaps.maps[this.props.name].instance); 
     delete GoogleMaps.maps[this.props.name]; 
    } 
    }, 

    render() { 
    return <div className="map-container"></div>; 
    } 
}) 

首頁。 jsx

Home = React.createClass({ 

    mixins: [ReactMeteorData], 

    componentDidMount() { 
    GoogleMaps.load({key: "AIzaSyAIoRRWbFOLmP4iLXrRmgDmNw0STlKMXqU"}) 
    }, 

    getMeteorData() { 
    return { 
     loaded: GoogleMaps.loaded(), 
     mapOptions: GoogleMaps.loaded() && this._mapOptions() 
    } 
    }, 

    _mapOptions() { 
    return { 
     center: new google.maps.LatLng(1.3, 103.8), 
     zoom: 8 
    } 
    }, 

    render() { 
    if (!this.data.loaded) { 
     return <div>Loading map...</div> 
    } 

    const script = document.createElement('script') 
    script.type = 'text/javascript' 
    script.src = '/markerwithlabel.js' 
    document.body.appendChild(script) 

    return <Map name="mymap" options={this.data.mapOptions}/> 
    } 
}) 

Answer 1

最後我明白了。它有點笨只是使用MarkerWithLabel而不是google.map.MarkerWithLabel，因爲api並不來自google maps api

GoogleMaps.ready(this.props.name, function(map) { 
     var marker = new MarkerWithLabel({ 
     position: map.options.center, 
     map: map.instance, 
     zoom: 8, 
     labelContent: "$425K", 
     }) 
    })