javascript - 'outerMap' 未定义 no-undef

Question

我目前正在为我的 Udacity 类(class)做最后一个项目。我目前收到以下错误，我似乎无法修复它。我希望有人能帮助我。我将在下面发布代码。

“/src/components/Map.js 第 86 行:'outerMap' 未定义 no-undef”

我是 stackoverflow 的新手，所以我不确定我是否做对了。

import React, { Component } from 'react'
import ListLocations from './ListLocations'

class Map extends Component {

  state = {
    map: {},
    center: {},
    infowindow: {},
    markers: [],
    mapMarkers: [],
    defaultIcon: {},
    highlightedIcon: {}
  }

  initMap = (center) => {
    return new window.google.maps.Map(document.getElementById('map'), {
      center: center.location,
      zoom: 11
    })
  }

  hideMarkers = (mapMarkers) => {
    mapMarkers.forEach((mapMarker) => {
      mapMarker.setMap(null)
    })
  }

  addMarkers = (map, markers, infowindow) => {

    const outerMap = this

    // Listing marker icon.
    const defaultIcon = this.makeMarkerIcon('0091ff')

    // Create a "highlighted location" marker color for when the users mouse is over the location
    const highlightedIcon = this.makeMarkerIcon('FFFF24')
    let mapMarkers = []

    markers.forEach((marker) => {
      let m = new window.google.maps.Marker({
        position: marker.location,
        map: map,
        title: marker.title,
        icon: defaultIcon
      })
      mapMarkers.push(m)

      m.addListener('click', function() {
        outerMap.populateInfoWindow(m, infowindow)
      })

      m.addListener('mouseover', function() {
        this.setIcon(highlightedIcon)
      })
      m.addListener('mouseout', function() {
        this.setIcon(defaultIcon)
      })

    })
    this.setState({mapMarkers: mapMarkers, defaultIcon: defaultIcon, highlightedIcon: highlightedIcon})

  }

  fetchFromWikipedia = (marker, infowindow, map) => {
    const search = marker.title.split(' ').join('_')
    const url = 'https://en.wikipedia.org/w/api.php?action=query&origin=*&prop=extracts&exintro&titles=' + search + '&format=json&utf8'
    let extract = ''
    fetch( url, {
      method: 'POST',
      headers: new Headers( {
          'Api-User-Agent': 'Example/1.0'
      } )
    } ).then( function ( response ) {
      if ( response.ok ) {
          return response.json();
      }
      throw new Error( 'Network response was not ok: ' + response.statusText );
    } ).then( function ( data ) {
      // do something with data
      const pages = data.query.pages
      extract = pages[Object.keys(pages)[0]].extract
      const firstParagraph = extract.slice(0, extract.indexOf('</p>') + '</p>'.length)
      const pageLink = `<a href="https://en.wikipedia.org/wiki/${search}">For more information, visit ${search} Wikipedia website</a>`

      outerMap.fillInfoWindow(marker, infowindow, map, firstParagraph + pageLink)
    });
  }

  fillInfoWindow = (marker, infowindow, map, wikiData) => {
    infowindow.marker = marker
    infowindow.setContent(`<div>${marker.title}</div><div>${wikiData}</div>`)
    infowindow.open(map, marker)
    infowindow.addListener('closeclick', function() {
      infowindow.marker = null
    })
  }

  populateInfoWindow = (marker, infowindow, map) => {
    // Check to make sure the infowindow is not already opened on the marker.
    if (infowindow.marker !== marker) {
      this.fetchFromWikipedia(marker, infowindow, map)
    }
  }

  makeMarkerIcon = (markerColor) => {
    let markerImage = new window.google.maps.MarkerImage(
      'http://chart.googleapis.com/chart?chst=d_map_spin&chld=1.15|0|'+ markerColor +
      '|40|_|%E2%80%A2',
      new window.google.maps.Size(21, 34),
      new window.google.maps.Point(0, 0),
      new window.google.maps.Point(10, 34),
      new window.google.maps.Size(21,34))
    return markerImage
  }

  initSetup = () => {
    const center = {
      title: 'Dublin', location: {
        "lat" : 53.350140,
        "lng" : -6.266155
      }
    }
    const markers = [
      {title: 'Guinness Storehouse', location: {
        'lat'  : 53.341874,
        'lng' : -6.286709299999984
      }},
      {title: 'St Patricks Cathedral', location: {
        'lat' : 53.3395154,
        'lng' : -6.271476699999994
      }},
      {title: 'St Stephens Green', location: {
        'lat' : 53.340037,
        'lng' : -6.260384199999976
      }},
      {title: '3Arena', location: {
        'lat' : 53.3474963,
        'lng' : -6.2285077999999885
      }},
      {title: 'Dublin Port', location: {
        'lat' : 53.3495886,
        'lng' : -6.207789100000014
      }}
    ]

    let map = this.initMap(center)
    let infowindow = new window.google.maps.InfoWindow({maxWidth: 200})
    this.addMarkers(map, markers, infowindow)
    this.setState({map: map, markers: markers, center: center, infowindow: infowindow})
  }

  componentDidMount() {
    window.initSetup = this.initSetup
    loadMapAsync('https://maps.googleapis.com/maps/api/js?key=AIzaSyASRt2d-RHvAVmNubKvy90St01BcJNaTP8&callback=initSetup')
  }

  render() {
    const { map, markers, mapMarkers, infowindow, defaultIcon, highlightedIcon } = this.state
    return (
      <div>
        <ListLocations
          map={map}
          infowindow={infowindow}
          markers={markers}
          mapMarkers={mapMarkers}
          defaultIcon={defaultIcon}
          highlightedIcon={highlightedIcon}
          addMarkers={this.addMarkers}
          hideMarkers={this.hideMarkers}
          populateInfoWindow={this.populateInfoWindow}
        />
        <div id='map' className='map' ></div>
      </div>
    )
  }
}

export default Map

function loadMapAsync(src) {
  var s = document.createElement('script')
  s.type = 'text/javascript'
  s.async = true
  s.src = src
  s.onerror = () => {
    alert('Google Map API could not be loaded.')
  }
  var x = document.getElementsByTagName('script')[0]
  x.parentNode.insertBefore(s, x)
}

Answer 1

您在 addMarkers 函数中定义了 outerMap，但您也在 fetchFromWikipedia 函数中使用了它而没有定义它。您还必须在该函数中定义它。

fetchFromWikipedia = (marker, infowindow, map) => {
    const outerMap = this
    const search = marker.title.split(' ').join('_')

    // ...
}