問題タブ [ng-map]

ngMapを使用して Google マップをアプリに追加したいと考えています。

デモは、ハード コードされた HTML しかないという意味で "静的" です。サーバーに定期的にデータベースを調べて、時間とともに変化するプロットする座標を返すように要求するという意味で、コードを「動的」にしたいと考えています。それが明確であることを願っています。そうでない場合は、詳細をお尋ねください。

ngmap マーカーのデモを変更して、2 秒ごとにランダムな緯度/経度座標を生成しました (最終的なアプリのようにサーバーに行くのではなく)。プランクをご覧ください。

コンソールにエラーはありません。コンソールにこの種のものがたくさん表示されるので、ngMap がマーカーを追加しようとしているようです ...

ここで、K と A は、予想どおりの緯度/経度です。

しかし...地図上にマーカーが表示されません。私は何を間違っていますか？

[更新] 優れた回答で、喜んで報奨金を授与しました。これを読んで、@allenhwkimが別のstackoverflowの質問で言ったようにngMapを使用したい他の人のために、彼のブログでは、ngMapはあなたのために地図を作成し、その後、標準のGoogle Maps APIでそれを操作します.

たとえば、マーカーを追加するためにループする直前に
var bounds = new google.maps.LatLngBounds();、マーカーをマップに追加した後、ループ内で I を宣言しbounds.extend(latlng);、最後に、ループの後、I

私は答えをフォークし、これを示すために新しい Plunkを作成しました。世界で最も便利な機能ではありませんが、要点は$scope.mapGoogle Maps API での使用方法を示すことです。アレン、ngMap に感謝します。

Google マップ モデル ng-map があります。場所を書き込むと、その場所は表示されませんが、調べるとcenter="London"その場所に配置されます

私はng-mapAngular アプリで Google マップを表示するために使用していますが、これは JS の質問 (または単なる CSS ですか?) かもしれません。

レスポンシブ デザインを実装して、デスクトップ/モバイル、または単にユーザーがブラウザー ページのサイズを変更するだけであるかどうかにかかわらず、さまざまなディスプレイ サイズでマップが適切に表示されるようにするにはどうすればよいですか?

このページはそれを行いますが、I フレームを使用し、静的マップしかありませんが、実行時にマップを更新します (定期的に追跡します)。

私はこれらすべてにかなり慣れていないので、私の質問を理解できるように表現したことを願っています.

IonicFramework と ng-map で Angularjs を使用しています。ここですべてのドキュメントを読みました (リンク) が、ユーザーの現在の位置から別の位置に移動するための最良の方法 (または簡単な方法) をユーザーに示す方法がわかりません。

thisとthisも読みましたが、angular を使用したいと思います。

Ionic Framework b14 と最新の ngmap を使用しています。

マップを表示するビューがありますが、中心を設定したいときに、サービスから取得した座標が表示されません。

サーバーが応答するのに時間がかかる必要があると思いますが、それを修正する方法がわかりません。助けてください。

ありがとう。

私は allenhwkim によって作成された素晴らしい ngMap ディレクティブを使用してきましたが、デバイスに情報ウィンドウを表示するマーカーに問題があります。さまざまな要素に対して「data-tap-disabled='true'」と「scroll='false'」をネストするさまざまな方法を試しましたが、うまくいきませんでした。

彼がまとめたmarkerclusterモジュールがとても気に入っているので、広い範囲に複数のマーカーをプロットする必要があるので、それに頼ろうとしています。リポジトリには、カスタム ディレクティブを使用して世界中の店舗をプロットした素晴らしい例があり、単一のマーカーが表示されるまで十分にズームすると、クリック イベントが発生したときに情報ウィンドウにデータが表示されます。Chrome からテストする場合はすべて機能しますが、Android デバイスと iOS エミュレーターでテストする場合、情報ウィンドウは表示されません。しかし、情報ウィンドウが表示されるはずのように（Chromeからのテストのように）、デバイス上で画面/マップがシフトするため、クリックが登録されているようです。

myDirective.js

map.html

コントローラーはクリックリスナーをアタッチします

スタイル.css

div#map-container div[add-stuff-info] { 位置: 絶対; 表示: なし; 上: 5px; 右: 5px; 下: 5px; width: 40% } div#map-container div[add-stuff-info] a.hide-link { float:right } div#map-container div[add-stuff-info] table { width: 100% } div# map-container div[add-stuff-info] table td { text-align: left; パディング: 5px; ボーダー: 1px ソリッド #ccc }

ここで問題を理解できないようです。私が気づいたことの1つは、 this.element.css('display', 'block'); を削除するときです。Chrome からのディレクティブとテストから、ブラウザはデバイスのように動作するようです - 情報ウィンドウが表示されると、マップがシフトします...

私はAngularが初めてで、イベントハンドラー内の場所を変更する際に問題があります。ハンドラーは、Google マップに配置されたマーカー用です。私は ng-map を使用しています (これはかなり素晴らしいです)。

マーカーを作成するコードは次のとおりです (これは $http get の成功コールバック内で実行されます)。

イベント ハンドラは非常に単純です。

マーカーをクリックすると、ハンドラーが実行され、if/then/else ステートメントが実行されます。ただし、場所は変わりません。

これは、Googleマップを介してイベントリスナーを設定したため、角度の「コンテキスト」の外にいるためですか?

追加情報

window.location の使用に関する提案に感謝します。前に言及しなかったのは、マップが部分ビューの一部であるため、ページのリロードをトリガーしたくないということです。場所の変更に基づいて角度を付けて部分ビューを更新したいのです。$location.path('/unit') はそのイベント ハンドラーの外部で問題なく動作するため、これができることはわかっています。

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 行目を次のように括弧で囲みました。

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