angularjs - AngularJS 的谷歌地图

Question

我对 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

Answer 1

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

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

开始

一。下载并包含 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>`  

例子

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

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

希望能帮助到你

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

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

Answer 2

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

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

以下是如何显示标记：

索引.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>

控制器.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;
});

Answer 3

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

1. 创建指令
2. 创建 HTML
3. 如果需要，可以选择通过指令/控制器传递坐标。

指示

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>

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

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

对于上面的例子：

街道代码：

!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNmpFNThuUg!2m2!1d40.75816449978445!2d-73.98911289129973!3f175.51693470959802!4f7.069842517148402!5f0.7820865974627469

地图代码：

!1m18!1m12!1m3!1d755.5452773113641!2d-73.98946157079955!3d40.75804119870795!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0000000000000000%3A0x1952a6258d36ecc5!2sMcDonald's!5e0!3m2 !1sen!2srs!4v1445332854795

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

Answer 4

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

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

Answer 5

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