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。但是我尝试过延迟加载，它仍然会发生。

在加载 infobubble 并因此 div 可用后，让此视图呈现的最佳方法是什么。这就是它在控制台中工作的原因。但不是负载。

4

1 回答 1

2

只需使用谷歌地图事件来收听地图何时完全加载，就像这样

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

有了这个，您就可以 100% 确定地图已渲染，并且 google.maps 全局变量可用并已初始化。

于 2012-10-22T15:42:45.877 回答