問題タブ [angular-google-maps]

地図データを再ロードする方法、または新しいデータで地図を再中心化する方法を示すAngular Googleマップのチュートリアルをまだ見つけることができませんでした。

私のコントローラー：

HTML:

問題は、マップが既にそのデータをロードした後に vm.center の値を変更したり、vm.territories を追加/削除/変更したりしたい場合、事後にそれを再ロードするにはどうすればよいですか? データをUIにバインドしてその場で変更できることを望んでいましたが、それが可能かどうかはわかりません。

Google マップの情報ウィンドウ内の HTML で md ボタンを使用すると、Chrome コンソールでこのエラーがスローされます。

angular-google-maps http://angular-ui.github.io/angular-google-maps/#!/ライブラリを使用して、Angular で Google マップを使用しています。このプランカーでは、エラーを再現できますhttp://embed.plnkr.co/fWlFjuyuldZj6uITvWH7/preview
これを修正する方法はありますか? ネイティブの html ボタンを使用するとうまく機能しますが、角度のある素材を使用する必要があります。

ありがとう。

以下の最小限の例を考えると、2 つのマップは最終的に異なる位置に配置されます。なんらかの理由で、座標がスウェーデンのストックホルムであるにもかかわらず、後者はフランスに行き着きます。

この奇妙さを回避するにはどうすればよいですか?

再現するには、以下を html ファイルにコピーしてブラウザで実行します (jsFiddle も Plunkr もマップを表示したくありませんでした...):

angular-google-maps ディレクティブを使用しています。マップを表示するために ui-boostrap モーダルを使用しています。mapSelectLocation.html という名前のファイルでモーダル コンテンツを定義しています。モーダルを開く方法は次のとおりです。

mapSelectLocation.html:

mapSelectLocationController:

これにより、ポップアップが表示され、マップが適切にレンダリングされます。ただし、モーダルを閉じて再度開くと、マップが正しくレンダリングされません。マップ エリアの大部分はグレー表示され、マップのごく一部が左上隅に表示されます。

ただし、mapSelectLocation.html のコンテンツをファイル自体から同じページの角度テンプレート スクリプトに移動すると、問題なく開いて再度開き、毎回正しくレンダリングされます。

もちろん、templateUrl も更新します。

モーダルコンテンツを別のファイルに入れることがうまくいかない理由を教えてください。angularスクリプトテンプレートを使用する必要があるよりも、別々に保持したいと思います。

angularjs-google-map http://angular-ui.github.io/angular-google-maps/#!/apiを使用しています

マーカーをクリックして infoWindow を表示することで複数のマーカーを追加できますが、マウスがマーカー アイコンの領域に入ったときにマーカー infoWindow を表示し、マウスがマーカー アイコンの領域を離れたときにそれを非表示にする必要があります。クリックイベント。

Jsfiddle https://jsfiddle.net/meher12/bgb36q7b/でこの例を見て、私の目的を理解してください。

私のHTMLコード:

私のJSコード:

JS コードでわかるように、markerEvents を作成し、マウス イベントで変更されたマーカー ラベルを取得できますが、マウス イベントが発生したときにマップ上の各マーカーに関連付けられた infoWindow を表示しません。正しい値。

誰かがこの問題を解決するアイデアを持っていますか? 私の Jsfiddle コードに自由に変更を加えてください :)

ui-gmap-markersディレクティブ (の複数形)をネストすることは可能ui-gmap-markerですか?

たとえば、次のデータ構造があります。

各州に関連付けられている都市を表示したいので、次のようにします。

可能であれば、ネストされたディレクティブの「モデル」属性に何を使用しますか?

ng-repeatwithを使用してこれを行うことができましたui-gmap-marker。ただし、パフォーマンスの問題がいくつかあるため、複数形のディレクティブを使用したいと考えています。

単一バージョンのディレクティブで ng-repeat を使用したバージョンのJSFiddle (ui-gmap-marker)

ディレクティブの複数バージョンを使用したバージョンのJSFiddleui-gmap-markers ( )。ui-gmap-markers都市に使用したい入れ子に注意してください親からモデルにアクセスする方法がわかりません。

簡素化されたフィドルを作成しました。問題を確認するには、マップを操作する必要があります。

JSFiddle リンク

すばやくドラッグすると、マップが一瞬完全に灰色に点滅するように見えることに気付くか、少なくともそうなることを願っています。毎回発生するわけではないため、これを表示するには、すばやく数回ドラッグする必要がある場合があります。さらに、ズームレベルが低いほど頻繁に発生するようです。

これはタイルがキャッシュされた後であるため、タイルをフェッチする Google マップではありません。さらに、標準の Google マップの例で動作をテストしましたが、このちらつきは発生しません。$scope.$apply()Google がタイルをロードしている間にちらつきが発生することがあるため、ディレクティブから呼び出されて再描画を強制することに関係があると思います。つまり、2 つのイベントは互いに独立して発生します。

私の最後の手段はディレクティブを掘り下げることですが、これは UX の観点からはかなり根本的な問題のように思えます。おそらく最も重要なのは、 http://angular-ui.github.io/angular-google-maps/# !/demo の例では、最小ズーム レベルが設定されているにもかかわらず、この問題に悩まされていないことです。これは、私が説明している問題に対する簡単な修正です。

あなたが提供できる助けをありがとう、私は何が起こっているのかを特定しようとして一日中継ぎ目でアプリをバラバラにしてきました.どんなアドバイスでも大歓迎です.

アプリで ngRoute が完全に機能しています。ただし、http://angular-ui.github.io/angular-google-maps/#!/を使用するホームページは、ページの読み込み時に正常に動作しますが、別のページに移動してそこに戻ると、すべてのデータ バインディングが壊れます。コントローラーconsole.log()で値が変更されていることを証明している間、ダイジェスト サイクルが起動していないかのように、新しい値を反映するようにビューを更新できません。明示的に呼び出し$scope.appy()てみ$scope.diget()ましたが、どちらも機能しませんでした。コンソールに表示される js エラーはありません。