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

Question

首先是代码：

我创建了一个Ember组件，它将Google Maps v3映射为：

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

我在其他商店使用它，如：

.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页，然后我也会使用link-to链接返回'/'。然后组件未正确呈现。

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



因此，当我尝试重新渲染组件时会出现问题，因为当它第一次渲染它看起来很好时。我认为当转换到其他路径时组件被完全销毁，当我尝试在控制台中记录此对象时它看起来像是在转换到除了'/'之外的路由时未定义。

Answer 1

如果您有选择，而不是自己滚动，我建议您使用Ember Google Map组件，因为它似乎可以满足您的需求。它可以通过npm：npm i ember-google-map获得。如果那不是你的小巷，那么你可以挖掘源头，看看正确重新渲染地图需要什么。

Answer 2

发现它，看错了地方:) 问题出现在coordinatesChanged函数中，我试图在if map条件为真时在Google地图上触发调整大小功能，但是当组件被销毁并在转换时重新呈现时我将再次获取lat / lng我正在使用undefined坐标调整地图大小。固定功能如下：

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

因此，当map对象存在且两个坐标都已定义时，我必须调整大小。