我确实完成了适用于 iOS 和 Android 的 Phonegap 应用程序。 但现在 Windows 平台成了我的噩梦。
我需要在我的应用程序中集成 map 。对于 iOS 和 Android，我确实使用了 mapsplugin . 但不支持windows平台。
所以，对于 Windows，我确实尝试了 Maps JavaScript API . 但它在 Windows 设备上显示黑屏并且在 iOS 和 Android 上完美(我在这两个设备上都手动测试过)。
所以，我最终决定改用 Windows 平台的 Bing map 。 我试过 Being Map Dev Center .我确实在我的 index.html 中复制了整个 html 代码，但现在我在 :
上收到错误“Microsoft is undefined”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>
我确实花了很多天来解决它，但无法解决它。 请帮助我。
最佳答案
我看了一下这个，怀疑您遇到的问题是 Cordova 应用程序中的新安全性。 Cordova 默认阻止对外部资源的调用。所有 Bing map 服务都使用以下域之一，通常具有一个或多个子域。
- 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" />
现在，如果您构建项目，它可能会工作，也可能不会。如果它还不能确保您的应用程序的目标 Windows 版本为 10。config.xml 文件中应该有一个首选项属性，用于指定 Windows 的目标版本。确保它像这样设置为 10.0:
<preference name="windows-target-version" value="10.0" />
如果您现在构建并部署您的应用程序，它应该可以正常工作。我已经在我的 Windows 10 手机上用一张简单的 map 对其进行了测试，它可以正常工作。
请注意，目前 Windows 10 手机上的触摸控件存在一些已知的性能问题。即使您在手机上的浏览器中查看交互式 SDK，您也可以看到这些。我们的团队正在处理这些问题，并计划在下个月内解决这些问题。
提示:如果您使用的是 Visual Studio 并在尝试部署到 Windows Phone 时看到部署错误，请确保项目构建配置中的目标平台设置为 Windows Phone (通用)。
最初，当我开始研究这个问题时，我没有意识到将域列入白名单的过程因目标设备而异。结果我也想出了如何让它在 Android 上也能工作。对于 Android，白名单是通过内容安全策略元标记完成的。默认情况下，Cordova 使用此元标记:
<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 map 只需要您指定一个 URL 来访问 map 控件的代码，但是 Bing map 控件使用模块化框架，允许它快速加载，但也意味着它需要使用内联脚本标签动态加载大量额外资源。我们可以在元标记中为此设置一个安全设置。
考虑到所有这些因素，我将安全元标记修改为以下内容:
<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 应用程序中提供全屏 map 。
<!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 - 如何在 PhoneGap 的 windows 平台上实现 map (Google 或 Bing)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40238727/