問題タブ [angularjs-google-maps]

私はカスタムのGoogleMap AngularJS Directiveを使用しています。これは GitHub のあまり人気のないバージョンです。他の1 つがイベントを処理する方法に満足できなかったので、私はそれを使用しています。

マップを埋める図形でいっぱいの GeoJSON ファイルがあります。各エリアを選択できるようにインタラクティブにしたいと思います。そのため、最初のエリア選択とエリア選択解除を機能させることができましたが、エリアを選択してから別のエリアを選択すると、古い選択エリアのスタイルが変更され、新しいエリアが更新されます。

GeoJSON ファイルを繰り返し処理し、スコープを作成します。

次に、ng-repeat を使用してそれらをマップに追加します。

次に、イベント リスナーを追加します。これら 2 つはホバー効果用です。

エリア選択時はこちら

さらに、選択した領域の中心を計算するカスタム関数。

スコープからシェイプのスタイルを更新するにはどうすればよいですか? プランカー

マーカーのクリック イベントのパフォーマンスに問題があります。

これは私のマップビューです:

これは同じ機能を呼び出すボタンです (同じビューとコントローラー):

これは私の機能です：

ボタンをクリックすると、console.log が表示され、場所の変更がすぐに行われます。マーカーをクリックすると、console.log がすぐに表示されますが、場所の変更には最大 5 秒かかります。

これがどのようになるか考えていますか？

AngularJS を使用して Google マップの infoWindow を実装しようとしました。

私はテンプレートを持ってい<div>{{foo}}<br/>ます$scope.foo="bar"

「{{foo}}」ではなく、値が「bar」の情報ウィンドウを表示したい。そのため、内容をコンパイルして設定しましたが、まだ運がありません。

これはGoogle Maps InfoWindow 内の AngularJS ng-includeと重複していると思われるかもしれませ ん。、しかし、コンテンツを動的にコンパイルしたい。

ここに私が今持っているコードがありますhttp://plnkr.co/edit/RLdAcaGz5FfmJEZi87ah?p=preview

と思っ$scope.apply()ていたのですが、コードで実行できませんでした。

Google マップの InfoWindow $compiled を使用する方法はありますか?

ng-map google maps angular library を使用していますが、ブラウザでページをリロードすると、マップが更新されないという問題に直面しました。また、ブラウザが現在の場所を共有するように求めていることに気付きました。場所を共有することに同意するかどうかは関係ありません。次回同じページにアクセスすると、マップが正しく更新されます (ページを完全にリロードする必要はありません)。

angularjs アプリで ngMap を使用しています。マップ要素にズームを設定しようとすると、エラーが発生します。Chrome コンソールからのエラー メッセージは次のとおりです。

これは、マップ要素の zoom 属性が次の場合にトリガーされます。

私のAngularコントローラーにバインドされています：

dataContext は、アプリ内のさまざまな状態変数を公開するサービスです。また、関数を介して $scope.zoom を設定しようとしましたが、同じエラーが発生しました。

エラーは ng-map.js ファイルの 1568 行目で発生します。

何が起こっているのかを追跡しようとして、中心の設定とズームの設定の実行に従いました（中心の設定は問題を引き起こしません）。中心を設定すると、1568 行が実行され、引き続き楽しい方法で進みます。

ズームを (setZoom 関数を介して) 設定すると、ng-map.js の 196 行目のコードが実行されます。

205 行目で例外が発生し、Google マップの main.js ファイル内でエラーが発生します。

これの原因は何ですか？そして、それを解決する方法:)?

考えられる解決策

これをもう少しいじってみると、ズームレベル自体を設定していないことが問題の原因であることに気付きました。これは実際には、ズームが変更された後に発生した zoomchanged イベントの結果です。

204 行目で、初めてズームがマップに設定されます。

null に評価されます。その行が何をしているのか理解できないので、それがなぜなのかわかりません。

ただし、ズームへの将来の変更では、同じ行 204 が f の非 null 値に解決されます。

そこで、回避策として、205 行目と 206 行目を次のように括弧で囲みました。

そしてエラーは消えました。

angularjs アプリでngMapを使用しています。
複数のマーカーonclick of Open map! buttonと住所配列に存在する最初の住所を地図の中心として Google マップを表示しています。

プランクはこちら

example.js:

index.html:

すべての住所関連のマーカーは正常に表示されています。

しかし、アドレスの配列に最適なズームを自動的に設定する方法、ここではこれらのアドレスはデータベースから取得しているため、これらのアドレスはいくつかの条件に基づいてリクエストごとに変更されます。