Question

我正在尝试向我的infowindows添加一个事件，以便当用户＆＃34; mousesout＆＃34;信息窗口的关闭。要做到这一点，我在我的信息窗口附近加了一个div。

在我创建哈希的控制器中，我从部分创建了一个infowindow：

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())

在控制台中我打印了对象，但我也得到了＃34;未捕获的TypeError：无法读取属性＆＃39; __ e3 _＆＃39; of null＆＃34;。

如何让监听器在infowindow中运行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 Maps API v3 Event mouseover with InfoBox plugin

Answer 1

我写了working solution here。

我没有使用你的infobox方法，因为它不是那里的（我不知道它的作用）。

要在infowindow内容上添加事件，有两个步骤：

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

示例：

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

Google地图无法向infowindow div添加活动

1 个答案: