web-dev-qa-db-ja.com

AngularJSのGoogleマップ

私は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
angularjsgoogle-mapsgoogle-maps-api-3angularjs-directiveangularjs-google-maps
29
tdean

別の代替案、ng-mapをお勧めします。

私は自分のプロジェクト用にng-mapという名前の google maps 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バージョンを探している人のために、
_ng2-map_もあります https://ng2-ui.github.io/#/google-map

72
allenhwkim

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;
});
8
Nicholas Credli

Angular2には、 angular2-google-maps があります。 2016-05-14現在のライセンス：MIT。

0
koppor

マーカーを含める場合は、google-mapsディレクティブ内の別の要素で行う必要があります。次のようなことを行う必要があります。

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