如何在PhoneGap的windows平臺中實現Map（Google或Bing）？

我完成了iOS的Phonegap應用程序& Android。但是現在Windows平臺已經成爲我的噩夢。如何在PhoneGap的windows平臺中實現Map（Google或Bing）？

我需要將地圖集成到我的應用中。對於iOS & Android我確實使用了mapsplugin。但它不支持Windows平臺。

因此，對於我試過的窗口Maps JavaScript API。但它顯示在Windows設備上的空白屏幕&它完美的iOS & Android（我手動測試它在兩個）。

所以，我終於決定切換到Bing平臺的Windows平臺。我試圖Being Map Dev Center。我確實在我的index.html複製整個HTML代碼，但現在，我得到錯誤「微軟是未定義」上：

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

我認爲問題會是我的index.html可能無法加載它的下面源JS：

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

我確實投入了很多天來拯救它，但無法拯救它。請幫幫我。

來源

2016-10-25 Ayra

必應地圖在WP8目標中成功顯示，而在Windows平臺上我還沒有找到任何成功。 – Ayra

我看了一下，懷疑你遇到的問題是Cordova應用程序中的新安全問題。科爾多瓦默認阻止對外部資源的呼叫。所有Bing地圖服務均使用以下域名之一，通常包含一個或多個子域名。

的https：//*.bing.com
的https：//*.virtualearth.net

HTTP也可以使用，但可以讓使用https以增加安全性。作爲記錄在這裏我們可以列入白名單，這些域：https://cordova.apache.org/docs/en/4.0.0/guide/appdev/whitelist/index.html

白名單，這些領域針對Windows 10的時候，在你的科爾多瓦項目中打開config.xml文件和近填充的頂部，你應該看到<access origin="*" />這行添加以下兩後行：

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

現在如果你建立你的項目它可能工作，它可能不會。如果它不確保您的應用程序的目標版本爲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，白名單是通過內容安全策略metatag完成的。默認情況下，科爾多瓦使用這個元標記：

<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標記爲以下內容：

<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>

來源

2016-10-25 17:14:55 rbrundritt

感謝您的回答。但是如果我需要用最低目標Windows Phone 8.1支持我的應用程序呢？ –

我相信你應該可以做到這一點。之前許多人曾通過科爾多瓦在WP8.1上使用過Bing Maps V8。嘗試更改目標版本並查看它是否有效。 – rbrundritt

我沒有檢查您的代碼.Map目前僅在wp8平臺項目中顯示。而在Windows平臺地圖不加載。我正在用8.1操作系統版本的windows phone測試這個。 –

如何在PhoneGap的windows平臺中實現Map（Google或Bing）？

回答

相關問題