将 .js 转换为 .js.coffee 时未捕获的 ReferenceError

Question

在将我的.js 转换为.js.coffee 后，我得到了Uncaught ReferenceError 的map 的以下代码，而没有更改流程或它自己的代码中的任何内容。

我的脚本在使用.js 时运行良好，在.js.coffee 中不再运行。

我正在使用 GMAP API 以及时髦的 infowindows、rails 5、ruby 2.4。

你知道为什么吗？

编辑

为了清楚起见，我没有把 mapOptions 变量放在那里，它只是在我的存储 GMAP Snazzy 主题的文件中定义的变量。

markersData = '<%= raw @places_markers.to_json %>'

  markers = []

  icon =
    path: 'M4.415,8.829c2.432,0,4.415-1.983,4.415-4.415 C8.829,1.983,6.846,0,4.415,0S0,1.983,0,4.415C0,6.846,1.983,8.829,4.415,8.829z'
    fillColor: '#2962FF'
    fillOpacity: 1
    anchor: new (google.maps.Point)(0, 0)
    strokeWeight: 1
    scale: 2

  initializeMap = ->
    map = new (google.maps.Map)(document.getElementById('places-map'), mapOptions)

    google.maps.event.addListener map, 'click', ->
      infoWindow.close()

    displayMarkers(markersData)


  createMarker = (latlng, markerInfowindow, icon) ->
    marker = new (google.maps.Marker)(
      map: map
      position: latlng
      icon: icon
      draggable: true)

    markers.push(marker)

    google.maps.event.addListener marker, 'click', ->
      iwContent = markerInfowindow

      infoWindow = new SnazzyInfoWindow(
        marker: marker
        content: iwContent
        placement: 'top'
        maxWidth: 400
        maxHeight: 200
      )

      infoWindow.open(map, marker)

  displayMarkers = (markersData) ->
    bounds = new (google.maps.LatLngBounds)
    places_coordinates = []

    i = 0
    while i < markersData.length
      latlng = new (google.maps.LatLng)(markersData[i].place_lat, markersData[i].place_lng)

      markerInfowindow = markersData[i].infowindow

      places_coordinates.push(latlng)

      createMarker(latlng, markerInfowindow, icon)

      bounds.extend(latlng)
      i++

    markerCluster = new MarkerClusterer(map, markers)
    map.fitBounds(bounds)

  newLocation = (newLat, newLng) ->
    map.setCenter
      lat: newLat
      lng: newLng
    map.setZoom 15

  initializeMap()

Answer 1

map 是initializeMap 内部的一个局部变量：

initializeMap = ->
    map = new (google.maps.Map)(document.getElementById('places-map'), mapOptions)
    ...

所以它在其他任何地方都不可见，除非你强制它是全局的。 CoffeeScript 中的所有变量都是局部变量，除非您明确说明。

您可以创建一个类并将map 设为实例变量：

class YourMap
  constructor:
    @map = new google.maps.Map(...)

  # The rest of your code converted to methods goes here

或者，由于 CoffeeScript wraps your code in a self executing function 维护其范围规则，您可以在函数之外声明 map：

map = undefined
markersData = '<%= raw @places_markers.to_json %>'
markers = []
#...

然后别管其他一切。

在 CoffeeScript 中使用类可能会被认为更惯用。