谷歌地图的 AngularJS 路由答案

【问题标题】：AngularJS Routing for Google Maps谷歌地图的 AngularJS 路由
【发布时间】：2014-09-09 20:53:36
【问题描述】：

我无法让我的第二个视图显示在我的应用中。该应用程序应该做的是列出位置，当您单击一个位置时，它应该路由到嵌入了谷歌地图的不同视图并搜索该位置的坐标。我已经建立了一个plunkerfor我的项目。我相信我的问题在于定义我的控制器/模块。我会在这里发布我的代码，但是有多个类可能会让人感到困惑。任何人都可以帮忙吗？

演示：http://plnkr.co/edit/OZZRgiEcrLzreW3lrc5v?p=preview

【问题讨论】：

这是你上一个问题的重复吗？
我试着更具体一些。
你在 plunker 上有很多问题。我建议您设置一个新的，将所有 js 放入一个文件中，并且在您完成之前不要创建多个模块。此外，在您了解如何设置 Angular 应用程序和一些简单的路线之前，请忘记谷歌地图。然后发布一个问题。

标签： javascript html angularjs google-maps angularjs-routing

【解决方案1】：

这应该可以进一步帮助您：http://plnkr.co/edit/IEj0HAolgmUVrCghMtgN

除其他外，您的路由配置不正确

    $routeProvider
      .when("/index", {
        templateUrl:"index.html", 
        controller: "firstCtrl"})
      .when("/map", {
        templateurl:"map.html",
        controller: "MapController"})
      .otherwise("/index");

这会将放入<div ng-view> 的默认视图设置为包含 <div ng-view> 的index.html。类似于无限循环。

我将视图分成两部分：search.html 和 map.html，并将路由更新为如下所示：

$routeProvider
      .when("/search", {
        templateUrl: "search.html",
        controller: "searchController"
      })
      .when("/map/:locationName", {
        templateUrl: "map.html",
        controller: "mapController"
      })
      .otherwise({
        redirectTo: '/search'
      });

另外，您的地图数据没有发送到 mapController。有关解决方案，请参阅 plunkr。您现在唯一需要做的就是发送位置而不是名称。

我已经对您的代码进行了一些清理，并提供了一些有关路由如何工作以及如何改进模块定义的信息。

当我开始使用 AngularJS 时，这对我很有帮助。它也可能对您有所帮助：https://docs.angularjs.org/tutorial/

【讨论】：

非常感谢。这有很大帮助。不过我还有一个问题。你知道为什么现在地图没有加载吗？
我相信你可以通过一些调试找到答案:) 祝你好运。