[英]Google Maps Can't add event to infowindow div
I am trying to add an event to my infowindows so that when a user "mousesout" of the info window is closed. 我正在尝试向我的信息窗口添加一个事件,以便在关闭信息窗口的用户“ mousesout”时。 To do this I have added an div around my infowindow. 为此,我在信息窗口周围添加了一个div。
In my controller where I create the hash I create an infowindow from a partial: 在我创建哈希的控制器中,我从局部创建了一个信息窗口:
marker.infowindow render_to_string(partial: "/destinations/map_area_hotel_tile.html", locals: { hotel: hotel })
In the partial I have 在部分我有
<div id="info1"></div>
wrapped around everything else. 包裹着其他一切。
I have extended the regular builder and added in some test code so that basic information is printed to the console: 我扩展了常规构建器并添加了一些测试代码,以便将基本信息打印到控制台:
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())
In the console I get the object printed, but I also get "Uncaught TypeError: Cannot read property '__e3_' of null". 在控制台中,我得到了打印的对象,但同时也得到了“ Uncaught TypeError:无法读取null的属性'__e3_'”。
How do I get the listener to work div in the infowindow? 如何在信息窗口中使侦听器工作div? What am I doing incorrectly here? 我在这里做错了什么?
SOLUTION I PUT INTO PLACE: 我放入的解决方案:
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
I had to add a hover rather than mouseout because of a quark with the way that Google Maps and Infobox handle mouseout events, see: 由于存在夸克,我不得不添加一个悬停而不是鼠标悬停的方式,而Google Maps和Infobox会处理鼠标悬停事件,请参见:
See Google Maps API v3 Event mouseover with InfoBox plugin 查看带有InfoBox插件的Google Maps API v3事件鼠标悬停
I wrote a working solution here . 我在这里写了一个可行的解决方案 。
I didnt use your infobox
method since its not the point there (and I dont know what it does). 我没有使用您的infobox
方法,因为它不在那儿(我也不知道它在做什么)。
To add events on infowindow content, there are two steps: 要在信息窗口内容上添加事件,有两个步骤:
domready
event from infowindow 从domready
监听domready
事件 Example: 例:
google.maps.event.addListenerOnce @infowindow, 'domready', =>
$(@infowindow.getContent()).on 'click', ->
#code here
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.