1

こんにちは、angularjs と、GMaps をインスタンス化するために見つけたディレクティブを使用してアプリを開発しようとしています: http://nlaplante.github.io/angular-google-maps/#!/usage。すべての手順に従いましたが、マップをレンダリングできません! エラーは返されません。ヘルプ！！

HTMLで

<html ng-app="Maptesting">


<google-map center="center" 
            zoom="zoom" 
            markers="markers" 
            refresh="!isMapElementHidden" 
            style="height: 400px; width: 100%; display: block;">
</google-map>

<div ng-view></div>


<script type="text/javascript" src="js/angular/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.2/angular-route.min.js"></script>
<script type="text/javascript" src="js/angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>

<script src="app/map.js">
</script>

コントローラーで:

angular.module('Maptesting', ['google-maps'])

.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.markers = [];
        $scope.zoom = 8;

}])
4

7 に答える 7

6

別の答えですが、google-maps-directive は使いにくいと感じました。したがって、私は自分のプロジェクト用に ng-map と呼ばれるGoogle マップの angularjs ディレクティブを作成しました。これには、単純な機能のための Javascript コーディングは必要ありません。

このように見えます

<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" />
</map>
于 2013-12-19T18:09:42.633 に答える
3

ここで私の答え、angulaJS の完全なマップを確認できます。

複数のマーカーを持つ AngularJS Google マップ

于 2015-09-23T06:51:11.387 に答える
0

を使用する必要がありますrefresh="!isMapElementHidden"か?
これらのプロパティを削除すると機能するはずです。

http://embed.plnkr.co/p9rXdx1GnmnuLKsEAMkE/preview

angular.js: 

angular.module('Maptesting', ['google-maps'])

.controller('CtrlGMap', ['$scope', function($scope) {
        $scope.center = {
            latitude: 45,
            longitude: -73
        };

        $scope.markers = [];
        $scope.zoom = 8;

}])

index.html: 

<html ng-app="Maptesting">
<body ng-controller="CtrlGMap">
<google-map center="center" 
            zoom="zoom" 
            markers="markers" 
            style="height: 400px; width: 100%; display: block;">
</google-map>

<script src="http://code.angularjs.org/1.1.5/angular.js"></script>
<script type="text/javascript" src="angular.js"></script>

<script type="text/javascript" src="angular-google-maps.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&language=en"></script>


</script>
</body>
</html>
于 2013-09-19T11:05:27.200 に答える
0

こちらの動画でご覧いただけます。https://www.youtube.com/watch?v=9Zfwq_yPWDQ . これは、Google マップを表示するディレクティブを記述する方法を示しています。

于 2014-05-03T15:16:37.917 に答える