問題タブ [angular-google-maps]

ユーザーが特定の住所周辺にある物件リストを検索するアプリを入手しました。結果は次のようにレンダリングされます。

1. マップ上のマーカー、一部はクラスター化されます
2. 検索結果をリスト形式で含む div..

div 内の個々のリストとマーカーの間には 1:1 の関係はありません。b/c 一部のマーカーはクラスター内に含まれています。

私が実装しようとしているユースケースは、ユーザーがdivのリストをクリックすることです。これは自動的に

• リストにマップをパンします
• リストの情報ボックスを表示します。

これは、すでに存在するマーカーに対してはうまく機能します。ただし、クラスターの後ろに隠れているマーカーの場合..これは機能しません。

マップが次のようにズームするときのイベントリスナーを設定してみました:

しかし、これは機能しませんでした..これは、ズームレベルがクラスターを分割するのに十分ではないという事実が原因である可能性もあります..しかし、その場合、そのレベルが何であるかをどのように判断できますか? 私が基本的にやろうとしているのは、興味のあるリストが属するクラスターをクリックするユーザーをシミュレートすることです。これにより、クラスターが分割され、マップがズームインし、マーカーが表示されます。

私は Angular.js を使い始めたばかりで (これはすばらしい)、Google マップをプロジェクトに統合する必要があります。

Google Maps for AngularJSについて知りましたが、何か苦労しています。

options 属性を使用してマップから都市の名前を非表示にしようとしていますが、うまくいきません。

どんな助けでも大歓迎です。

私はスタイル配列がなければならないことを知っています

Styled Maps Wizardから取得したためです。

だから私がしたことはこれでした

view.html

controller.js

引用符と難解なものの組み合わせなしで、引用符を付けてみましたが、うまくいきませんでした。

allenhwkim の angularjs-google-mapsを試してみましたが、どちらも成功していません。

ご協力いただきありがとうございます！

特定のズーム レベルでは、マーカーが完全に表示されないようです。マーカーにアニメーションを追加すると、すべて正常に表示されます。

アニメーションなし:

アニメーションあり:

マークアップ:

私のマーカーのオプション :

私が試したこと:
- ブートストラップを無効 にする
- マーカー オプションを変更する - マーカー オプション
に z-index を追加する
- マップを更新する

使用される関連技術:
- ブートストラップ 3
- angular / angular-google-maps

マーカーのクリック (数千のマーカー) でマップを移動している単一のウィンドウがあります。「x」を押してウィンドウを閉じるまで、すべて正常に機能します。これにより、情報ウィンドウが非表示になるのではなく、dom から削除されるようです。closeClick パラメーターがあることがわかりますが、これが何をするのかわかりませんし、deleton をオーバーライドするために関数に接続できないようです。

マークアップは次のとおりです。

ウィンドウと「x」ボタンの例を次に示します。

ウィンドウが削除されないようにして、代わりに非表示にするにはどうすればよいですか?

または、これを行うべきより良い方法はありますか?

プロジェクトのためにAngularをいじり始めたところです。

「angular-google-maps」を使用してページに Google マップを表示しています。このマップにはマーカーがあります。マーカーのクリック イベントをキャッチすることに成功しました。ただし、マーカーがクリックされると、フィルターされた ul を更新する必要があります。フィルターはフォームによって制御されます。

最初は、Angular が onchange イベントを介して検出することを期待して、フォームの入力フィールドの値を JS で変更しようとしました。そうではありませんでした。そこで、グーグルで調べたところ、スコープ内のモデルを変更する必要があることがわかりました。だから私はそれをしました。$scope.search.$ = marker.name;

現在は機能しますが、最初にフィールドに手で何かを入力した後でのみ機能します。ページの読み込み直後に機能するには、この「マーカーをクリックしてフィルターを更新する」機能が必要です。$scope.search.$ = marker.name;フィールドに入力する前に変更しようとすると、コンソールから次のエラーが表示されUncaught TypeError: Cannot set property '$' of undefined ます。

前もって感謝します！

編集：

置くことで解決しました

私のコントローラーの中に。モデルが Angular を使用してのみ定義されている場合、フォームが編集されるまで、モデルは Angular によってスコープに入れられないよう<input ng-model="search.$" id="search-field" type="text" name="search-filter" placeholder="Sök i fritext" autofocus>です...

目的 マップ上に多数のランダム マーカーを表示します。それらのいずれかがクリックされると、情報ウィンドウが開きます。API ページ (マーカー) の例の 1 つを使用し、ウィンドウのマークアップと、ウィンドウを表示するためのクリック ハンドラー メソッドを追加しました。しかし、私はそれを機能させることはできません

問題 マーカーは表示されますが、クリックしてもウィンドウが表示されません。

さておき 、タグとng-repeatを使用すると、これが機能しました。しかし、ドキュメントによると、タグが推奨される方法です。

何か案は？

例: https://angular-ui.github.io/angular-google-maps/#!/api

ここでプランク: http://plnkr.co/edit/ze7EKMQNV7MLGkmlhiAC

解決済み これは、nitewulf50 によってリンクされた plunk を使用して解決されました。

いくつかのメモ:

Window タグが持つことができる子は 1 つだけのようです。そのため、すべてのコンテンツを div で囲む必要がありました。

私はAngular-google-mapライブラリを使用して、次のようなウィンドウでマーカーを表示しています:

そのため、window ディレクティブで templateUrl を指定し、マーカーが情報ウィンドウを正常に表示しましたが、問題は、templateParameter で指定したパラメーターがテンプレート ビューでアクセスできないように見えることです。ここに、infoWindow のテンプレート ビューと、window ディレクティブから渡されたパラメーターにアクセスしようとした方法を示します。

Angular google map api ( http://goo.gl/dtD7hk ) を使用しています。地図をaの位置にパンさせたいと思います。

私のコントローラーには、次の機能があります。

しかし、これはうまくいきません。Google マップをパンするにはどうすればよいですか? 何らかの方法でアニメーションが含まれていれば、本当に素晴らしいでしょう。ズームアウト - パン - 設定にズームイン ($scope.map.zoom)。

どうも！