1

私は最近angularjsを使い始め、Googleマップでアプリを作成しています。マップを呼び出し、オートコンプリート関数を呼び出すモジュールを作成しました。オートコンプリートは機能しますが、マップが表示されません

これはモジュールの私のコードです

    module.directive('googleplace', function() {
    return {
        require: 'ngModel',
        replace: true,
        link: function(scope, element, attrs, model) {
            var options = {
                types: []
            };
            var myOptions = {
                zoom: 6,
                center: new google.maps.LatLng(51.228388, 4.405518),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            scope.gPlace = new google.maps.places.Autocomplete(element[0], options);

            google.maps.event.addListener(scope.gPlace, 'place_changed', function() {
                scope.$apply(function() {
                    console.log(element.val());
                    console.log(element);
                    model.$setViewValue(element.val());                
                });
            });
            var map = new google.maps.Map(document.getElementById(attrs.id), myOptions);
            console.log(map);
        }
    };
});

おまけ: また、スコープからのデータを使用してマップにオーバーレイを配置したいのですが、オブジェクトにモデル値を指定してから Google マップに配置するにはどうすればよいですか?

4

2 に答える 2

1

最初にお勧めするのは、渡されたモデルの種類、コントローラーの外観、ここで正確に何が起こっているかを確認できるように、フィドルを作成することです。

私は最近似たようなことをしようとしていましたが、私の場合の問題は、モデルがロードされる前にディレクティブが起動したことでした。これは、マップのレンダリングを妨げる値が Google マップに渡されなかったことを意味します。

これを回避する 1 つの方法は、ngmodel を「監視」することです。詳細については、Angularjsがオブジェクトをディレクティブに渡すを参照してください。

もう 1 つの方法は、コントローラーから "map" 関数を呼び出すことです。

もちろん、ビルド済みのディレクティブも使用できます: http://nlaplante.github.com/angular-google-maps/#!/usage

編集: オーバーレイの場合、必要なすべてのオーバーレイ データとともに、モデルをトランスクルージョンしてディレクティブ スコープに渡すことができます。次に、これらのモデルがロードされていることを確認するためにこれらのモデルを「監視」し、「マップ」機能を実行してマップをレンダリングします。

于 2013-02-18T18:51:22.107 に答える