混合应用程序中的 Bing 地图答案

【问题标题】：Bing Maps in a hybrid app混合应用程序中的 Bing 地图
【发布时间】：2014-06-24 13:15:06
【问题描述】：

我目前正在尝试在 Visual Studio 中提供的新“多设备混合应用”模板中使用 Bing Maps AJAX API v7，该模板使用 Apache Cordova 提供跨平台兼容性。我按照模板编写了以下代码在http://msdn.microsoft.com/en-us/library/gg427624.aspx：

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
    <meta charset="utf-8" />
    <title>Wand</title>

    <!-- Wand references -->
    <link href="css/index.css" rel="stylesheet" />

    <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1">
    </script>

    <script type="text/javascript">

    function GetMap() {
        var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
    }

    </script>

</head>
<body onload="GetMap();">

    <div id='map' class="mainview"></div>
    <div class="menu">This is the menu</div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>

    <script src="scripts/index.js"></script>



</body>
</html>

但是当我在 Windows 8.1 中调试它时，它说 Microsoft 没有定义（在 GetMap 函数中）。我假设图书馆来自

https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1

未正确加载。我的代码有什么问题吗？我应该使用 AJAX WEB API，还是有另一个用于应用程序（我看到的唯一一个仅适用于 Windows 8）？

我认为我的应用无法加载网络库，因为它没有适当的权限。在 config.xml 中有一个域访问部分，但它说它不适用于 windows 平台，那么我该如何设置它以允许从 https://ecn.dev.virtualearth.net 加载页面？

编辑：从 Web 上下文 (ms-appx-web) 加载脚本使脚本运行，但如果我希望代码是多平台的，我不能使用它。解决方案是在 Windows 8 清单中包含 Bing 地图 URL 的权限，我该怎么做？

【问题讨论】：

标签： visual-studio cordova windows-8 bing-maps visual-studio-cordova

【解决方案1】：

索引.HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <meta charset="utf-8" />
    <title>Cordova Bing Mapping</title>

    <link href="css/index.css" rel="stylesheet" />

    <!--Needed for iOS & Android-->
    <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
</head>
<body>
    <div id='map' class="mainview"></div>
    <div class="menu">This is the menu</div>
    <!-- Cordova reference, this is added to your app when it's built. -->
    <script src="cordova.js"></script>
    <script src="scripts/index.js"></script>
</body>

INDEX.JS

(function () {
    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    //Loads Scripts Dynamically
    function loadScript(filename) {
        var fileref = document.createElement('script')
        fileref.setAttribute("type", "text/javascript")
        fileref.setAttribute("src", filename)
    }

    function onDeviceReady() {

        // Load Local Scripts if Windows
        if (device.platform == "windows") {
            MSApp.execUnsafeLocalFunction(
            function () {
                loadScript("scripts/veapicore.js");  //Bing Maps SDK VS 2013
                loadScript("scripts/veapiModules.js"); //Bing Maps SDK VS 2013
                loadScript("scripts/mapcontrol.js"); //downloaded from http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0

                Microsoft.Maps.loadModule("Microsoft.Maps.Map", {
                    callback: loadMap
                });
            })
        }

    };

    function loadMap() {
        var map = new Microsoft.Maps.Map(document.getElementById("map"), {
            credentials: "BING_MAPS_KEY"
        });
    }
})();

注意事项

* 这适用于 Windows 8、Windows Phone 8、iOS、Android * 必应地图 SDK VS 2013 1.下载地址：https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1 2. 本地位置：C:\Users\[USER]\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript \ * 对于 Windows Phone（通用）- Microsoft.Maps.loadModule("Microsoft.Maps.Map", { callback: loadMap });仍然未定义。

【讨论】：

为了让它工作，我只需要在头部添加脚本标签，例如document.getElementsByTagName('head')[0].appendChild(fileref);

【解决方案2】：

我通过执行以下操作在“多设备混合应用程序”中实现了 Bing 地图：

将 C:\Users\\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript 文件夹复制到我的本地项目
将http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0 复制到我的本地项目中作为remoteBingMaps.js
在“deviceready”上（addScript 动态地将脚本文件添加到 document.body）

一个。如果 device.platform == "windows8"，则 MSApp.execUnsafeLocalFunction(function () { addScript("Bing.Maps.JavaScript/js/veapicore.js"); addScript("Bing.Maps.JavaScript/js/veapiModules.js"); });

b.否则 addScript("scripts/frameworks/remoteBingMaps.js")
加载地图控件时（其中loadMap初始化地图控件）

一个。如果 device.platform == "windows8"，则 Microsoft.Maps.loadModule("Microsoft.Maps.Map", {callback:loadMap}}

b.否则 loadMap()

我已经在 Windows 8.1、Windows Phone、Android 和 iOS 上运行了这个功能。

【讨论】：

【解决方案3】：

代码似乎有几个问题。

首先，您直接从 URL 引用库。这可能会导致 Windows 平台出现问题。您可能需要下载该文件并将其添加到本地项目中。

其次，您的 Bing 地图键末尾有一个空格，这就是应用在运行时抛出错误的原因。

<script type="text/javascript">

function GetMap() {
    var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr " });
}

</script>

将其更改为：

<script type="text/javascript">

function GetMap() {
    var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: "AgegeewHkb9iTTQDLseMTuQyxQyZybs7uUv7aqIgKu6U8CiaflVNApy5WtDXqtHr" });
}

</script>

【讨论】：

不是这样，因为那行没有执行（它无法找到微软）。问题是它不包含来自服务器的 JS 脚本。

【解决方案4】：

我遇到了同样的问题，但建议的解决方案都不适合我。有趣的是，在 Ripple Simulator 上加载 Bing 地图时没有任何问题，但在 Android 模拟器或设备上，我遇到了未定义 Microsoft 命名空间的问题 - 显然未加载命名空间。经过一番搜索，我发现在 config.xml 中有白名单插件的配置，该插件控制可以从应用程序请求哪些页面（您可以为每个平台单独配置），所以我只是添加了：

    <allow-intent href="https://ecn.dev.virtualearth.net/mapcontrol/*" />

对于 android 平台，从 index.html 中注释掉 Content-Security-Policy 并开始工作。

【讨论】：