0

私は次の設定をしています：

クラス App.Views.Maps は Backbone.View を拡張します

el: '#map'

  events:


  initialize: ->
    @searchModel = new App.Models.Search()
    @view = new App.Views.MapBox(map: this)

    @render()

  render: ->
    @loadMap()
    $("[rel=tooltip]").tooltip()

 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/111/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')

allowedBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(51.278, -0.536)  
  new google.maps.LatLng(51.701, 0.309)
)

lastValidCenter = new google.maps.LatLng(51.503,-0.113)

google.maps.event.addListener @gMap, "dragend", =>
  if allowedBounds.contains(@gMap.getCenter())
    lastValidCenter = @gMap.getCenter()
    return
  $('#myModal').modal(backdrop: true)
  $('#myModal').on('hide', => 
    origin = new google.maps.LatLng(51.438264485659836,-0.05715396179630261)
    @gMap.setCenter(origin)
    center = google.maps.LatLng(51.503,-0.113)
    @gMap.panTo(origin)

    )
@initLabel()


initLabel: =>
    #rendered = view.render().el
    #console.log rendered
    @initLabel = new InfoBubble(
      position: new google.maps.LatLng(51.44115356738888, 0.14849636779354114)
      maxWidth: 240
      maxHeight: 210
      padding: 0
      content: '<div class="tooltip_header"></div>'
      tabPadding: 15
      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)

これにより、マップがロードされ、マップの上に InfoBubble がロードされます。コンテンツをロードします <div class="tooltip_header"></div> これがロードされた後、追加しloadMapて追加すると

view = new App.Views.MapBox()
view.render().el

ビューをロードしようとします：

class App.Views.MapBox extends Backbone.View

    el: '.tooltip_header'

    events:
      'click .testdrive' : 'loadTestDrive'
      'click .test' : 'loadTestDrive'

    template: JST["app/backbone/templates/mapbox"]

    initialize: ->

      @render()

    render: ->
      $(@el).html(@template())
      this

    loadTestDrive: ->
      console.log @options.map
      console.log "yessss"
      @options.map.loadTestDrive()

何も起こりません...しかし、コンソールに入って実行すると：

view = new App.Views.MapBox({map: this})

コンテンツは、マップ上の Infobubble 内にレンダリングされます。

InfoBubble の負荷が非同期であり、存在する前にレンダリングする div を呼び出しているためだと思います。しかし、遅延読み込みを試みましたが、それでも発生します。

インフォバブルがロードされ、div が利用可能になった後に、このビューをレンダリングするための最良の方法は何ですか? これがコンソールで動作する理由です。しかし、負荷ではありません。

4

1 に答える 1

2

このようにマップが完全に読み込まれたときに、Googleマップのイベントを使用してリッスンするだけです

    google.maps.event.addListener(map, 'tilesloaded', _.bind(function() {
        this.render();
        google.maps.event.clearListeners(map, 'tilesloaded');
    },this));

これにより、マップがレンダリングされ、google.maps グローバルが使用可能で初期化されていることを 100% 確信できます。

于 2012-10-22T15:42:45.877 に答える