Question

我确实为iOS＆amp;完成了Phonegap应用程序Android系统。但它的Windows平台现在变成了我的噩梦。

我需要在我的应用中集成地图。对于iOS和＆amp; Android我确实使用了mapsplugin。但它并不支持Windows平台。

所以，对于Windows，我确实试过Maps JavaScript API。但它在Windows设备上显示空白屏幕。它在iOS和iOS中非常完美; Android（我手动测试了两者）。

所以，我最终决定切换到Windows平台的Bing地图。我试过Being Map Dev Center。我在index.html中复制了整个html代码，但现在我得到了错误＆＃34;微软未定义＆＃34; on：

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

我看了一眼，并怀疑您遇到的问题是Cordova应用程序中的新安全性。 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时将这些域列入白名单，请在您的Cordova项目中打开config.xml文件，并在此行附近看到<access origin="*" />后面的<access origin="*.bing.com" subdomains="true" /> <access origin="*.virtualearth.net" subdomains="true" />附近添加以下两行：

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

现在，如果你构建你的项目它可能会工作，它可能不会。如果它还不确保您的应用程序所针对的Windows版本10.在config.xml文件中应该有一个偏好属性，用于指定Windows的目标版本。确保将其设置为10.0，如下所示：

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

如果您现在构建和部署应用程序，它应该可以正常运行。我已经在我的Windows 10手机上使用简单的地图测试了它并且它有效。

请注意，目前Windows 10手机上的触控控件存在一些已知的性能问题。即使您在手机的浏览器中查看交互式SDK，也可以看到这些内容。我们的团队正在研究这些问题并计划在下个月内解决这些问题。

提示：如果您在尝试部署到Windows Phone时使用Visual Studio并发现部署错误，请确保项目的生成配置中的目标平台设置为Windows Phone（通用）。

最初，当我开始研究这个时，我没有意识到白名单域名的过程因目标设备而异。因此，我也想出了如何让它在Android上运行。对于Android，白名单是通过内容安全策略metatag完成的。默认情况下，Cordova使用此元标记：

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

我最初尝试添加我之前提到的域名，继续看到网络跟踪中阻止的文件。需要注意的一件事是，为简单起见，Bing Maps仅要求您指定一个URL来访问地图控件的代码，但Bing Maps控件使用模块化框架，允许它快速加载但也意味着它需要使用内联脚本标记即时加载大量其他资源。我们可以在元标记中设置安全设置。

考虑到所有这些因素，我将安全元数据修改为以下内容：

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

这些更改现在允许从前面提到的两个域加载JavaScript和CSS文件，并允许来自这些域的JavaScript文件使用内联脚本加载其他资源。

将这一切放在一起是一个简单的代码示例，我用于测试，在Cordova应用程序中提供全屏地图。

kotlin

如何在PhoneGap的Windows平台上实现Map（Google或Bing）？

1 个答案: