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

【问题标题】：How to re-render Ember components with google maps如何使用谷歌地图重新渲染 Ember 组件
【发布时间】：2015-02-24 12:28:30
【问题描述】：

首先是代码：

我创建了一个 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

问题和场景

第一个场景

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

第二种情况

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

第三种情况（有问题）

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

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

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

【问题讨论】：

标签： javascript css google-maps google-maps-api-3 ember.js

【解决方案1】：

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

【讨论】：

谢谢，Oren 的回答，我不太喜欢使用外部插件/gem 来制作非常简单的组件，我想要的是带有标记的简单地图，这样维护起来会容易得多当它是我自己写的。从我检查的内容来看，Ember Google Map 插件看起来很棒，但在我的情况下它过于复杂。

【解决方案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 对象存在并且两个坐标都已定义时，我必须调整大小。

【讨论】：