2016-10-25 5 views
3

Android用Phonegapアプリ& Androidを仕上げました。 今は私にとって悪夢となったWindowsプラットフォームです。PhoneGapのWindowsプラットフォームでマップ(GoogleまたはBing)を実装する方法は?

私は自分のアプリに地図を統合する必要があります。iOS用& Androidはmapspluginでした。 しかし、それはWindowsプラットフォームをサポートしていません。

Windowsの場合、私はMaps JavaScript APIを試しました。 しかし、Windowsデバイスでは空白の画面が表示されます& iOSで完璧です& Android(私は手動で両方でテストしました)。

私は最終的にWindowsプラットフォーム用のBingマップに切り替えることにしました。 私は.Iは私のindex.htmlにコピー全体のHTMLコードをしましたが、今私は上のエラー「Microsoftが定義されていない」を得たBeing Map Dev Centerを試してみました:だ、それをロードすることはできないかもしれません、私は問題が私のindex.htmlになると思う

map = new Microsoft.Maps.Map(document.getElementById('myMap'), {credentials: 'Your Bing Maps Key'}); 

下のソースJS:

<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script> 

私はそれを鎮痛するのに多くの日を費やしましたが、鎮痛することはできませんでした。 私を助けてください。

+0

Windowsプラットフォームでは、私はまだ成功しませんでしたが、BingマップはWP8ターゲットで正常に表示されます。 – Ayra

答えて

1

私はこれを見て、実行している問題がCordovaアプリの新しいセキュリティだと思っています。デフォルトでCordovaは外部リソースへの呼び出しをブロックします。すべてのBing Mapsサービスでは、次のドメインの1つを使用します。多くの場合、1つ以上のサブドメインがあります。

  • ます。https://*.bing.com
  • ます。https://*.virtualearth.net

HTTPも使用されるが、セキュリティ強化のためにhttpsを使用することができますすることができます。 https://cordova.apache.org/docs/en/4.0.0/guide/appdev/whitelist/index.html

Windows 10をターゲットにするときにこれらのドメインをホワイトリストに追加するには、Cordovaプロジェクトのconfig.xmlファイルを開き、塗りつぶしの上に表示されるこの行の後に次の2行を追加します行:

<access origin="*.bing.com" subdomains="true" /> 
    <access origin="*.virtualearth.net" subdomains="true" /> 

ここでプロジェクトをビルドするとうまくいくかもしれません。また、あなたのアプリが対象とするWindowsのバージョンが10であることを確認していない場合。config.xmlファイルにターゲットバージョンのWindowsを指定するプリファレンスプロパティが存在する必要があります。それは、このような10.0に設定されていることを確認します

<preference name="windows-target-version" value="10.0" /> 

あなたは今、それが動作するはずのアプリを構築し、展開する場合。私は簡単なマップで私のWindows 10の電話でそれをテストし、それが働いた。

現時点では、Windows 10の電話機のタッチコントロールに関する既知のパフォーマンスの問題があります。お使いの携帯電話のブラウザでインタラクティブSDKを表示しても、これらを見ることができます。私たちのチームはこれらの作業に取り組んでおり、次の月に解決する予定です。

ヒント:Visual Studioを使用して、あなたのWindows Phoneに展開しようとすると、展開エラーが表示される場合、プロジェクトのビルド構成でのターゲットプラットフォームは、Windows Phoneの(ユニバーサル)に設定されていることを確認してください。

最初に私がこれを調べ始めたとき、ドメインをホワイトリストにするプロセスがターゲットデバイスによって異なることに気付きませんでした。その結果、私はAndroidでもこれを動作させる方法を理解しました。 Androidの場合、ホワイトリストはコンテンツセキュリティポリシーのメタタグによって行われます。デフォルトでは、コルドバは、このメタタグを使用しています。

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 

私は当初、私はネットワークトレースでブロックされたファイルを参照するために継続することにより、前述のドメインに追加してみました。 Bing Mapsでは、地図コントロールのコードにアクセスするために単一のURLを指定するだけで済みますが、Bing Mapsコントロールはモジュール式のフレームワークを使用するため、読み込み速度が速いだけでなく、必要なことも意味しますインラインスクリプトタグを使用してオンザフライで多数の追加リソースをロードします。これにはメタタグで設定できるセキュリティ設定があります。心の中でこれらすべてのもの、私は次のようにセキュリティメタタグを変更して

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *"> 

これらの変更は現在JavaScriptとCSSファイルは、前述の二つのドメインからロードされ、また、これらのJavaScriptファイルを可能にすることができますインラインスクリプトを使用して追加のリソースをロードすることができます。

ここでは、Cordovaアプリケーションでフルスクリーンマップを提供するテストに使用した簡単なコードサンプルを示します。

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 

     <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; style-src 'self' 'unsafe-inline' https://*.bing.com https://*.virtualearth.net; media-src *"> 

     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 

     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script> 
     <script> 
      var map; 

      function GetMap() { 
       map = new Microsoft.Maps.Map('#myMap', { 
        credentials: 'Your Bing Maps Key' 
       }); 
      } 
     </script> 
     <style> 
      body, html{ 
       padding:0; 
       margin:0; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="myMap"></div> 
    </body> 
</html> 
+0

お返事ありがとうございます。しかし、もし私が最小限のターゲットWindows Phone 8.1で私のアプリをサポートする必要があれば? –

+0

私はあなたがこれを行うことができるはずだと信じています。多くの人が以前にCordovaからWP8.1でBing Maps V8を使用していました。ターゲットバージョンを変更し、動作するかどうか確認してください。 – rbrundritt

+0

あなたのコードを確認しました。マップは現在wp8プラットフォームプロジェクトでのみ表示されています。 Windowsプラットフォームのマップが読み込まれていない間。私は8.1のOSバージョンでWindowsの電話でこれをテストしています。 –

関連する問題