javascript - Ember.JS 路由与 Google map

Question

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

但是，我认为本例中的问题与 Ember.JS 路由以及 JavaScript 的加载方式有关。如果我直接访问包含 map 的页面，例如:url.com/#/map，我将看到 map ，但如果我尝试离开此页面然后返回， 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 中，每个 View 中都有 didInsertElement Hook 来执行这样的初始化工作。因此，为了使您的 map 正常工作，您应该定义一个 MapView 然后定义 Hook ，如下所示:

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

希望有帮助。