30

私は AngularJS を初めて使用し、https://github.com/angular-ui/angular-google-mapsを使用しようとしています。

自分のページにマップをレンダリングしようとしていますが、エラー メッセージが表示され、その意味がわかりません。このエラー メッセージを理解するための助けをいただければ幸いです。

ここにプランクを作成しました：

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
4

5 に答える 5

72

別の代替手段である ng-map をお勧めします。

自分のプロジェクト用に、ng-map という名前のGoogle マップ angularjs ディレクティブを作成しました。これには、単純な機能のための Javascript コーディングは必要ありません。

始めるには

1。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版をお探しの方はhttps://ng2-ui.github.io/#/google-map
もありますng2-map

于 2013-12-19T18:31:43.073 に答える
8

google-map要素内に「markers」属性を含めているようです。

実際、@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;
});
于 2013-12-05T09:50:48.627 に答える
4

私はちょうど今日、Angular アプリケーションに Google マップを実装する必要がありました。私の実装には非常に単純なものが必要だったので、これを自分で行い、単純なディレクティブを作成することにしました。役立つと思われる人のために、ソースを以下に残しておきます。

  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>

それだけです。Google クエリ文字列は「pb」と呼ばれることを思い出してください。これは、Google から取得できるすべての埋め込みコードで使用されるコードです。これをディレクティブに直接渡すことも、必要な場合はコントローラーを介して、またはディレクティブ自体を介して渡すこともできます。テンプレート内のディレクティブで任意の 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

于 2015-10-20T09:26:52.993 に答える
0

Angular2 の場合、angular2-google-mapsがあります。2016 年 5 月 14 日時点のライセンス: MIT。

于 2016-05-14T13:57:22.100 に答える