Question

markerwithlabel没有显示在meteorjs上的谷歌地图上。我正在使用dburles：google-maps和markerwithlabel v1.1.9。我似乎无法与dburles集成：google-maps，我将markerwithlabel.js放在公共文件夹中

我有这个错误

未捕获的TypeError：google.maps.MarkerWithLabel不是函数

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

Home.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",
      })
    })

markerwithlabel没有显示在meteorjs上的谷歌地图上

1 个答案: