Ember.JS 路由与谷歌地图

Question

我目前正在使用 Ember.JS 创建一个 Web 应用程序，它利用 Google Maps API 从 JSON 文件中提取位置。

但是，我认为这种情况下的问题与 Ember.JS 路由以及 JavaScript 的加载方式有关。如果我直接访问包含地图的页面，例如：url.com/#/map 我会看到地图，但如果我尝试离开此页面然后返回，地图就会消失。

在 Ember/App.js 中初始化代码是必须吗，或者也可以在 .HTML 网站上完成？如果它有话要说，我也会使用 Foundation 作为响应部分。以下是我到目前为止的做法：

JavaScript：

<script>
    function initialize()
    {
        var mapProp = {
            center:new google.maps.LatLng(63.38, 15),
            zoom:5,
            mapTypeId:google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

        var markers = [];

        var infowindow = new google.maps.InfoWindow();

        for (var i = 0; i < locations.length; i++) {
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i][6], locations[i][7]),
                map: map,
                title: locations[i][0] + " -  " + locations[i][1] + ", " + locations[i][2] + " " + locations[i][3],
                icon: 'img/map_pin_xs.png'
            });

            google.maps.event.addListener(marker, 'mousedown', (function(marker, i) {
                return function() {
                    infowindow.setContent("<div style='height: 150px;'><span style='font-weight: bold;'>" + locations[i][0] + "</span><br /><span style='font-size: 15px'>" + locations[i][1] + "</span>" + "<br /><span style='font-size: 15px'>" + locations[i][2] + ", " + locations[i][3] + "</span>" + "<br /><a class='aCard' style='font-size: 13px;' target='_blank' href='tel:" + locations[i][4] + "'>" + locations[i][4] +"</a>" + "<br /><span style='font-size: 15px'><a class='aCard' target='_blank' href='" + locations[i][5] + "'>" + locations[i][5] +"</a></span>" + "<hr />" + "<span style='width: 100%'><a class='aCard' style='margin-left: 65px;' href='#' data-reveal-id='BookTime'>Book Time</a></span>" + "</div>");

                    infowindow.open(map, marker);
                }
            })(marker, i));

            markers.push(marker);
        }


        var mc = new MarkerClusterer(map, markers);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

HTML：

<script type="text/x-handlebars" data-template-name="map">
    <div id="map_canvas" class="six columns" style="border-radius: 5px;"></div>
</script>

Ember.JS：

App.Router.map(function() {
    this.route('home', { path: '/'});
    this.route('map');
});

Answer 1

在 ember 中，您在每个视图中都有 didInsertElement 挂钩，可以像这样进行初始化工作。所以为了让你的地图正常工作，你应该定义一个MapView，然后定义钩子，这样就可以了：

App.MapView = Ember.View.extend({
  didInsertElement: function() {
    // initialization work here
  }
});

希望对你有帮助。