javascript - 如何使用谷歌地图重新渲染 Ember 组件

Question

首先是代码:

我创建了一个 Ember 组件，它可以像这样呈现 Google Maps v3 map :

App.GoogleMapsComponent = Ember.Component.extend(
classNames: ['ember-view-map']

insertMap: (->
  @getUserLatLng()
  options =
    center: new google.maps.LatLng(
      @get('latitude'),
      @get('longitude')
    )
    zoom: 14
    draggable: false
    zoomControl: false
    panControl: false
    streetViewControl: false
    scaleControl: false
    mapTypeControl: false
    scrollwheel: false
    disableDoubleClickZoom: true
    mapTypeId: google.maps.MapTypeId.ROADMAP

  @set 'map', new google.maps.Map(@$('.map-container')[0], options)
  @set 'markerCache', []
  @coordinatesChanged()
  @setMarkers()
).on('didInsertElement')

getUserLatLng: ->
  self = @
  if !@.get('latitude') || !@.get('longitude')
    $.ajax
      url: '//ipinfo.io/json',
      success: (response) ->
        self.set('latitude', response.loc.split(',')[0])
        self.set('longitude', response.loc.split(',')[1])
      ,
      dataType: 'json'

coordinatesChanged: (->
  map = @get('map')
  if map
    map.setCenter new google.maps.LatLng(@get('latitude'), @get('longitude'))
    map.setZoom map.getZoom()
    google.maps.event.trigger(map, 'resize')
  return
).observes('latitude', 'longitude')

组件模板是:

.map-wrapper
  .map-container

我在其他 channel 使用它，例如:

.row.row-map
 .col-md-12.col-map
   google-maps latitude=location.latitude longitude=location.longitude markers=markers

问题和场景

1. 第一个场景

这个导出被路由到我的“/”，现在如果我通过从浏览器输入 URL 来呈现这个页面，它会很好地呈现这个组件。

1. 第二种情况

我访问应用程序中的其他页面并使用 link-to 链接转换到我的“/”，google-maps 组件呈现正常。

1. 第三种情况(有问题)

我访问“/”，使用 link-to 转换到其他页面让我们说页面 about 然后我从那里返回到“/”也使用 链接到链接。然后组件没有正确渲染。

我可以看到正确的 DOM 元素，但谷歌地图没有调整到全宽/高度，它只在左上角显示一层 map ，如:

所以当我尝试重新渲染组件时会出现问题，因为当它第一次渲染时看起来很好。我认为该组件在转换到其他路由时被完全破坏，当我尝试在控制台中记录此对象时它看起来像它在转换到“/”以外的路由后未定义。

Answer 1

如果您有选择，而不是自己动手，我建议您使用 Ember Google Map组件，因为它似乎可以满足您的需求。它可以通过 npm 获得:npm i ember-google-map。如果这不是您的拿手好戏，那么您可以深入了解源代码，看看需要什么才能正确地重新渲染 map 。