如何使用 ember.js 从 .json 创建谷歌地图答案

【问题标题】：how to use ember.js to create a google map from .json如何使用 ember.js 从 .json 创建谷歌地图
【发布时间】：2014-05-14 13:11:27
【问题描述】：

首先我是 ember.js 的新手，我刚刚完成了网站上的教程，我相信我可以用它来创建我想要的东西。

我有一个带有对象数组的 xy.json。这些对象包含：纬度、经度和更多信息。现在 .json 中的每个对象都应在 google 地图上具有标记，并在地图上以视图为中心并创建正确视图的 url 的导航。

我相信我需要两个车把模板（应用程序和索引）。导航应用程序和地图索引。

现在我需要将数据 (.json) 放入一个模块并对其进行循环。

For objects in Objects 
    ....
end

但我不确定如何创建指向谷歌地图中心的链接并将标记放在地图上。

感谢任何帮助我在正确的方向上启动。 >_

【问题讨论】：

标签： ember.js

【解决方案1】：

我建议创建一个实现地图的 Ember Component。要为地图配置和添加标记，您将在 Component 中实现 didInsertElement。如果你这样做：

App.GoogleMapComponent = Ember.Component.extend({
    didInsertElement: function() {
        var map = Ember.$(this.get('element'));
        // ... configure map ...
    }
});

然后在你的模板中，你可以使用：

{{#each loc in model}}
    {{google-map location=loc}}
{{/each}}

【讨论】：

组件是一个车把模板，我（就像我通常会做的那样）放置地图？地图所需的 Javascript 我可以安全地放在头上吗？如何将我的 JSON 保存在变量中，或者将我的 JSON 转换为对象更好？结构如下：{{#each model}} <li class="list-group-item"> <h2>{{place_name}}</h2> {{#each programme_entries}} <hr> <h4>{{title}}<span class="badge pull-right">{{from_to}}</span></h4> <p>{{description}}</p> <p>{{details}}</p> <p>Tags: {{kind}}</p> </hr> {{/each}} {{/each}}
您的评论中有很多问题！ Component 可能有也可能没有模板，它不是必需的。我展示的命名约定将起作用（{{google-map}} 暗示GoogleMapComponent）。至于您的其他问题，我建议您复习一下指南的各个部分：emberjs.com/guides 您的其他问题应该在此处讨论。
是的，我正在阅读很多东西，但由于我对 javascript 也很不熟悉，所以我脑海中的一切仍然有点混乱。我以为我在某处读到“GoogleMapComponent”更像是一种命名约定，并且不必对功能做任何事情。我知道当我用标记定义我的地图时，我可以查看组件并查询导航栏的信息..（？）但是：首先我需要一个基本地图（如何加载 api？）第二最重要的是，我需要来自 json 的数据（我怎样才能将其解析为可用的标记）：D 谢谢！
我早些时候发现了这个，并且想知道为什么它使用视图而不是组件，以及为什么我不能像示例中那样添加谷歌地图 - grunt/bower 似乎删除了 gruntfile 中没有的任何源：（无论如何，感谢链接我会尝试研究一下，看看我能想出什么。Ember 似乎有一个非常陡峭的学习曲线，我缺少一些指导，该指南有很多信息，但我缺少一些对所有事实的解释......（;