骨干事件未触发 - Google地图信息泡泡

我试图触发Google地图内谷歌Infobubble内点击事件。骨干事件未触发 - Google地图信息泡泡

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内。

基本上，我最终需要的是当点击信息气泡内的按钮时触发的事件。我认为这可能是因为骨干没有看到信息气泡，因为它后来被加载，所以不能附加自己？

来源

2012-10-10 Charlie Davies

默认情况下，骨干视图中的事件使用事件代理绑定到根el。因为你正在切换你的el事件“失去”。

你可以试试的是reDelegateging使用delegateEvents方法你的事件。

作为一个观点，我看到你正在缓存$(this.el)，这是不再需要的，因为你现在可以使用$el来代替（我认为从backbone.js 0.9.2开始）。

来源

2012-10-10 13:44:24 Jack

谢谢，我将如何重新触发delegateEvents –

你应该能够调用该方法（像'this.delegateEvents（）'）后，你分配你的'el'到'＃maps' – Jack

嗯，这似乎不要么工作......这可能是它在GOogle地图内部的事实吗？而不是一个标准的股利。并且它是在delegate事件之后创建的事实？ –

骨干事件未触发 - Google地图信息泡泡

回答

相关问题