Как реализовать карту (Google или Bing) на платформе Windows в PhoneGap?

Question

Я закончил приложение Phonegap для iOS & Android. Но это платформа для Windows, которая стала для меня кошмаром.

Мне нужно интегрировать карту в мое приложение. Для iOS & Android я использовал mapsplugin. Но он не поддерживает платформу Windows.

Итак, для окон я сделал попытку Maps JavaScript API. Но он показывает пустой экран на устройстве Windows & Это идеальное решение для iOS & Android (я вручную проверил его в обоих).

Итак, я, наконец, решил перейти на карту Bing для платформы Windows. Я пытался Being Map Dev Center .Я сделал скопировать весь HTML-код в моем index.html, но теперь я получил ошибку «Microsoft не определен» на:

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> 

Я вложил много дней, чтобы заманить его, но не смог его слить. Пожалуйста, помогите мне.

Answer 1

Я взглянул на это и подозреваю, что проблема, с которой вы сталкиваетесь, - это новая безопасность в приложениях Кордовы. Кордова по умолчанию блокирует вызовы внешних ресурсов. Все службы Bing Maps используют один из следующих доменов, часто с одним или несколькими подобластями.

• 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" /> 

Теперь, если вы строите свой проект, это может сработать, возможно, это не так. Если он также не гарантирует, что версия 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 (Universal).

Первоначально, когда я начал изучать это, я не понимал, что процесс в белых списках был различным в зависимости от целевого устройства. В результате я также понял, как заставить это работать и на 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>