AngularJS 的谷歌地图答案

【问题标题】：Google maps for AngularJSAngularJS 的谷歌地图
【发布时间】：2013-12-19 19:04:05
【问题描述】：

我对 AngularJS 很陌生，我正在尝试使用 https://github.com/angular-ui/angular-google-maps。

我只是想让地图在我的页面上呈现，但我收到一条错误消息，我不知道这意味着什么。任何有关理解此错误消息的帮助将不胜感激。

我在这里创建了一个 plunk：

github.com/twdean/plunk

这是浏览器中的错误：

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2

【问题讨论】：

你能创建一个 JSFiddle 或 Plunk 吗？这会有所帮助。
我实际上并没有看到您在控制器中执行推荐的属性定义（通过angular.extend） - 说您需要这样才能使指令正常工作：nlaplante.github.io/angular-google-maps/#!/usage
推荐的属性存在；他在控制器中使用了不同的语法。
截至 2013 年 11 月 27 日，Github README 表示网站上的文档已过时。最好等待更新的文档。
我在 youtube youtube.com/watch?v=RbxDLTfQc5g 上找到了这个视频，解释说你不需要扩展语法，因为 Tyler 说那里的属性只是写得不同。

标签： angularjs google-maps google-maps-api-3 angularjs-directive angularjs-google-maps

【解决方案1】：

我建议另一种选择，ng-map。

我为自己的项目创建了一个名为 ng-map 的 google maps angularjs directive。这不需要任何 Javascript 编码即可实现简单功能。

开始

一个。 Download 并包含 ng-map.js 或 ng-map.min.js

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

两个。使用map 标签，以及可选的control、marker 和shape 标签

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</ng-map>`

Examples

要在您的应用中使用它，只需将“ngMap”作为对您的应用的依赖项。

var myApp = angular.module('myApp', ['ngMap']);

希望对你有帮助

------------- 编辑 -------------------

对于那些寻找 angular2 版本的人，
还有ng2-maphttps://ng2-ui.github.io/#/google-map

【讨论】：

@Farm，抱歉。我做了修复
优秀的回购和帮助库。在这里 +1 并在 github 上加注星标 :-)
ngMap 是否只处理硬编码的 HTML？或者我可以在运行时从控制器为它生成 HTML 吗？
@Mawg，如果您不更改 HTML 而只更改地图，那么 ngMap 可以完成这项工作。你不需要编译。你从服务器获取数据并使用 $scope.map 与 ngMap 通信，你可以做到。我不完全是你想要做的，所以请举个例子并提出你自己的问题。我很乐意回答。
@Sarah 不，标记不是 DOM 对象。是的，用于多个标记。

【解决方案2】：

您的 google-map 元素中似乎包含了“标记”属性。

正如@Tyler Eich 所提到的，截至 2013 年 12 月 5 日的文档仍然过时。删除标记属性似乎可以使其工作。

这里是如何显示标记：

index.html

<div ng-controller="MapCtrl">
    <google-map id="mymap" 
            center="center" 
            zoom="zoom" 
            draggable="true"                                    
            mark-click="false">
            <markers>
                <marker ng-repeat="marker in markers" coords="marker">
                </marker>
            </markers>
    </google-map>
</div>

controller.js

var controller = module.controller('MapCtrl', function($scope) {
  $scope.myMarkers = [
      {
         "latitude":33.22,
         "longitude":35.33
      },
      ...
  ];

  $scope.center = {
      latitude: 33.895497,
      longitude: 35.480347,
  };

  $scope.zoom = 13;
  $scope.markers = $scope.myMarkers;
  $scope.fit = true;
});

【讨论】：

如何在标记指令上设置自定义标记图像？
@Nicholas Credli 谢谢。是否可以在标记上添加 ngclick？

【解决方案3】：

我今天刚刚需要在我的 Angular 应用程序中实现一个谷歌地图。由于我的实现需要一些非常简单的东西，我决定自己做这件事并创建一个简单的指令。我会将我的来源留在下面，以供任何可能觉得有用的人使用。

创建指令
创建 HTML
可选地通过指令/控制器传递坐标，如果你需要。

指令

angular.module('ngPortalApp')
  .directive('googleMap', function () {
    return {
      template: '<iframe width="100%" height="350" frameborder="0" style="border:0"></iframe>',
      restrict: 'E',
      scope: {
        pbcode: '='
      },
      link: function postLink(scope, element) {
        var mapFrame = element.find("iframe");
          if (scope.pbcode) {
            mapFrame.attr('src', "https://www.google.com/maps/embed?pb=" + scope.pbcode);
          }
          else {
            mapFrame.attr('src', '');
          }
      }
    };
  });

HTML

<div class="col-lg-12">
<google-map pbcode="'!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNmpFNThuUg!2m2!1d40.75816449978445!2d-73.98911289129973!3f175.51693470959802!4f7.069842517148402!5f0.7820865974627469'"></google-map>
</div>

这就是它的全部内容。请记住，google 查询字符串称为“pb”，这是您可以从 google 获取的所有嵌入代码中使用的代码。您可以直接将其传递给您的指令，或者如果您需要通过您的控制器甚至通过指令本身。您可以在模板内的指令中设置任何 iframe 映射设置。

要在街景或地图视图之间切换，您只需发送相应的代码，无论您从哪个来源（db、json 等）获取它们。

对于上面的例子：

街道代码：

！1M0！3平方米！1sen！2srs！4v1445332712674！6m8！1M7！1s34JkuBgIzmIJNmpFNThuUg！2平方米！1d40.75816449978445！2D-73.98911289129973！3f175.51693470959802！4f7.069842517148402！5f0.7820865974627469 EM>

地图代码：

！1M18！1M12！1M3！1D755041198707955！2M3！1F0！2F0！3F0！3M2！1I1024！2I768！4F13.1！3M3！1M2！1S0X000000000000000000％3a0x1952a6258d36ecc5 !2s麦当劳!5e0!3m2!1sen!2srs!4v1445332854795

目前还没有任何问题。这是一个小提琴：jsFiddle

【讨论】：

【解决方案4】：

如果您想包含标记，您应该在 google-maps 指令内的另一个元素中执行此操作。你应该这样做：

<google-maps options="someOptionsObject"> 
<markers cords="someArrayWithLatitudeAndLongitudeCords"></markers>    
</google-maps>

【讨论】：

【解决方案5】：

对于 Angular2，有 angular2-google-maps。许可证截至 2016 年 5 月 14 日：麻省理工学院。

【讨论】：