骨幹事件未觸發 - 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地圖信息泡泡

回答

相關問題