複数のGoogleマップをコルドバのページのようなアプリ

Googleマップからの表示とピッキングの場所を中心に、コルドバに基づいてモバイルアプリケーションを開発しています。アプリケーションのデザインはとなります。のように、すべてのページの高さはすべて&です。幅とナビゲーションボタン&戻るすべてのページには地図がありますが、これは問題です。Googleマップのインスタンスが1つだけの場合です。どうすればこの問題を解決できますか？複数のGoogleマップをコルドバのページのようなアプリ

使用スタティックマップAPIとすべてのページにマップキャンバスdivの上に一時オーバーレイを作成します。私は2つのアイデアを持っていました。これにより、ユーザーは迅速さを感じることができます。ユーザーが次へをクリックすると、次のページが上にスライドし、APIからマップイメージが表示されます。インタラクティブなGoogleマップでは、オーバーレイの背後にあるDivが置き換えられます。
何らかの読み込み画面を使用します。これはUXのために私にとっては良い解決策ではありません。ユーザーは迅速感を失います。

他に解決策はありますか？

出典

2016-05-19 David Sýkora

マップとは別の1つの<div>にマップを保存し、必要な「ページ」がある限り常にトップに留まります（たとえば、ページとマップを2つの角度コントローラに分割し、それらを同期させるためにルートコントローラ上のイベント）？

ページがナビゲーション要素と同じように聞こえるため、読み込みロジックを変更して、毎回フルページを読み込むのではなく内容を変更するだけです。

Googleマップが要件でない場合、私はすでにLeaflet.jsを使用して複数のマップを持つAngularページベースのアプリを構築しています。

出典

2016-05-19 09:53:46 raphv

あなたのソリューションに感謝します。私はAngularに慣れていないので、ページを複数の部分に分割し、マップ以外の部分だけをアニメーション化しようとします。 –

GoogleマップJS APIを使用して複数のマップインスタンスを使用できないのはなぜですか？ APIを使用することは可能です。または、あなたはその要件を自分で作成しましたか？複数のマップ作業が（APIキーを必要とする）

例：

var maps = []; 
 
function initMaps(){ 
 

 
\t for(var i = 0; i < 3; i++){ 
 
\t \t maps.push(new google.maps.Map(document.getElementById('map' + i), { 
 
\t \t \t zoom: 10, 
 
\t \t \t center: new google.maps.LatLng(40.740, -74.18), 
 
\t \t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t \t })); 
 
\t } 
 

 
}

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps" 
 
    async defer></script> 
 
<body style="margin:0px; padding:0px;" > 
 
\t <div id="map0" style="clear:both;float:left;height:200px; width:500px;"></div> 
 
\t <div id="map1" style="clear:both;float:left;height:200px; width:500px;"></div> 
 
\t <div id="map2" style="clear:both;float:left;height:200px; width:500px;"></div> 
 
</body>

EDITは

あなただけgoogle.maps.event.trigger(map[i], "resize")マップが表示されるたびにトリガする必要があります。地図のdivまたは地図のdivの親divがdisplay:none div内にある場合、地図ビューは、あなたがその上でresizeを呼び出すまで正しく動作しません。

出典

2016-05-19 10:12:34

はい要件を作成しました。マップは同様のコンテンツを持ちますが、APIはこのコンテンツを何度もダウンロードし、安全なユーザーのモバイルデータ使用を望みます。 –

その場合は、Googleマップはあなたに適していません。彼らは地図のタイル画像にno-cacheヘッダを入れ、それをキャッシュするためのサービス条件によって禁止されている。 –

複数のGoogleマップをコルドバのページのようなアプリ

答えて

関連する問題