谷歌地图无法将事件添加到信息窗口 div答案

【问题标题】：Google Maps Can't add event to infowindow div谷歌地图无法将事件添加到信息窗口 div
【发布时间】：2014-06-26 20:03:37
【问题描述】：

我正在尝试向我的信息窗口添加一个事件，以便当信息窗口的用户“mousesout”关闭时。为此，我在信息窗口周围添加了一个 div。

在我创建哈希的控制器中，我从部分创建一个信息窗口：

marker.infowindow render_to_string(partial: "/destinations/map_area_hotel_tile.html",      locals: { hotel: hotel })

在部分我有

<div id="info1"></div>

围绕着其他一切。

我已经扩展了常规构建器并添加了一些测试代码，以便将基本信息打印到控制台：

class @AreaMarker extends Gmaps.Google.Builders.Marker

  create_infowindow_on_click: ->
    @addListener 'click', @infowindow_close
    @addListener 'mouseover', @infowindow_binding
    #@addListener 'mouseout', @infowindow_close

  create_infowindow: ->
    return null unless _.isString @args.infowindow

    boxText = document.createElement("div")
    boxText.innerHTML = @args.infowindow
    @infowindow = new InfoBox(@infobox(boxText))

  infobox: (boxText) ->
    if @getServiceObject().position.e < @getServiceObject().getMap().getCenter().e
      # bottom left quad (x (- is left, + is right),y (+ is lower, - is higher))
      if @getServiceObject().position.d < @getServiceObject().getMap().getCenter().d
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(36, -310)
        closeBoxURL: ""
        pane: "floatPane"
      else
        # upper left quad
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(36, -25)
        closeBoxURL: ""
        pane: "floatPane"
    else
      # bottom right quad
      if @getServiceObject().position.d < @getServiceObject().getMap().getCenter().d
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(-324, -310)
        closeBoxURL: ""
        pane: "floatPane"
      else
        # upper right quad
        content: boxText
        disableAutoPan: true
        pixelOffset: new google.maps.Size(-324, -25)
        closeBoxURL: ""
        pane: "floatPane"

  infowindow_binding: =>
    @constructor.CURRENT_INFOWINDOW.close() if @_should_close_infowindow()
    @infowindow ?= @create_infowindow()

    return unless @infowindow?

    @infowindow.open( @getServiceObject().getMap(), @getServiceObject())
    info1 = document.getElementById("info1")
    console.log info1
    google.maps.event.addListener info1, "mouseover", ->
      console.log "in the infowindow"
    @marker.infowindow ?= @infowindow
    @constructor.CURRENT_INFOWINDOW = @infowindow

  infowindow_close: =>
    @infowindow.close( @getServiceObject().getMap(), @getServiceObject())

在控制台中，我打印了对象，但我也得到“未捕获的类型错误：无法读取属性 '__e3_' of null”。

如何让监听器在信息窗口中工作 div？我在这里做错了什么？

我提出的解决方案：

that = @
google.maps.event.addListenerOnce @infowindow, 'domready', =>
    info1 = document.getElementById("info1")
    $("#infowindowz").hover (->
      console.log "inside the div"
      return
    ), ->
      console.log "outside the div"
      that.infowindow.close that.getServiceObject().getMap(), that.getServiceObject()
      return

由于 Google 地图和 Infobox 处理鼠标悬停事件的方式存在夸克，我不得不添加悬停而不是鼠标悬停，请参阅：

见Google Maps API v3 Event mouseover with InfoBox plugin

【问题讨论】：

标签： javascript google-maps-api-3 infowindow gmaps4rails

【解决方案1】：

我写了一个working solution here。

我没有使用您的 infobox 方法，因为它不是重点（我不知道它的作用）。

要在信息窗口内容上添加事件，有两个步骤：

从 infowindow 监听 domready 事件
然后将事件附加到其 html

例子：

google.maps.event.addListenerOnce @infowindow, 'domready', =>
  $(@infowindow.getContent()).on 'click', -> 
    #code here

【讨论】：