1

我正在尝试通过单击 Google Map 内的 Google Infobubble 内的点击来触发事件。

class MapSite.Views.Maps extends Backbone.View

  events:
    'click [name=testdrive]' : 'initControls'

  initialize: ->
    @render()

  render: ->
    @el = $("#map")  
    $this = $(this.el)
    @loadMap()

  initControls: ->
    alert "hello"

  loadMap: ->
    osmMapType = new google.maps.ImageMapType(
      getTileUrl: (coord, zoom) ->
        "http://tile.openstreetmap.org/#{zoom}/#{coord.x}/#{coord.y}.png"
      tileSize: new google.maps.Size(256, 256)
      isPng: true
      alt: "OpenStreetMap layer"
      name: "OSM"
      maxZoom: 19
    )

    cloudMadeMapType = new google.maps.ImageMapType(
      getTileUrl: (coord, zoom) ->
        "http://b.tile.cloudmade.com/****/54912/256/#{zoom}/#{coord.x}/#{coord.y}.png"
      tileSize: new google.maps.Size(256, 256)
      isPng: true
      alt: "CloudMade layer"
      name: "CMade"
      maxZoom: 13
    )

    lat = 51.503
    lng = -0.113
    latlng = new google.maps.LatLng(lat, lng)
    options =
      zoom: 10
      center: latlng
      mapTypeId: 'OSM'
    @gMap = new google.maps.Map(document.getElementById("map"), options)
    @gMap.mapTypes.set('OSM', osmMapType)
    @gMap.mapTypes.set('CloudMade', cloudMadeMapType)
    @gMap.setMapTypeId('CloudMade')


    @initShape()
    @initLabel()



initLabel: ->
    console.log("This is where the label should appear")
    initLabel = new InfoBubble(
      position: new google.maps.LatLng(51.44115356738888, 0.14849636779354114)
      maxWidth: 240
      maxHeight: 210
      shadowStyle: 1
      padding: 0
      content: '<div class="tooltip_header"><h4>Hello</h4></div><div class="tooltip_content"><p>Nunc nec, egestas vel augue rhoncus massa cras, tincidunt a nisi nisi est lundium non sed? Eros pulvinar</p></div> <div id="tooltip_buttons" class="tooltip_buttons"><button class="btn btn-success" name="testdrive">Test Drive</button> <button class="btn btn-warning">Read More</button></div>',
      tabPadding: 12
      backgroundColor: 'black'
      borderRadius: 0
      arrowSize: 10
      borderWidth: 0
      borderColor: '#AB2424'
      disableAutoPan: true
      hideCloseButton: false
      arrowPosition: 0.5
      backgroundClassName: 'phoney'
      tabClassName: 'tabClass'
      activeTabClassName: 'activeTabClass'
      arrowStyle: 2
      )

    initLabel.open(@gMap)

结尾

地图加载得很好，信息气泡在那里。然后我尝试将一个事件链接到它被点击，但它没有触发。我已将 el 设置为“#map”，并且 infobubble 的 div 位于地图 div 内。

基本上，我最终需要的是一个事件，当单击信息气泡内的按钮时，该事件会被触发。我认为这可能是因为 Backbone 没有看到信息气泡，因为它是在之后加载的，所以无法自行连接？

4

1 回答 1

0

默认情况下，主干视图中的事件el使用事件委托绑定到根。因为你正在改变你的el事后“丢失”的事件。

您可以尝试做的是使用delegateEvents方法重新委托您的事件。

顺便说一句，我看到您正在缓存$(this.el)，这不再是必需的，因为您现在可以使用$el代替（我认为从主干.js 0.9.2 开始）。

于 2012-10-10T13:44:24.313 回答