Question

我目前正在尝试在新的多设备混合应用程序中使用Bing Maps AJAX API v7。 Visual Studio中提供的模板，它使用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的权限，我该怎么办？

Answer 1

INDEX.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"
        });
    }
})();

注意

* This will work on Windows 8, Windows Phone 8, iOS, Android
* Bing Maps SDK VS 2013
  1. Download Location: https://visualstudiogallery.msdn.microsoft.com/224eb93a-ebc4-46ba-9be7-90ee777ad9e1 
  2. Local Location: C:\Users\[USER]\AppData\Local\Microsoft SDKs\Windows\v8.1\ExtensionSDKs\Bing.Maps.JavaScript\1.313.0825.1\redist\commonconfiguration\neutral\Bing.Maps.JavaScript\
* For Windows Phone (Universal) - Microsoft.Maps.loadModule("Microsoft.Maps.Map", { callback: loadMap }); is still undefined.

Answer 2

我已经在多设备混合应用中实现了Bing地图＆＃34;通过执行以下操作：

将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
On＆＃34; deviceready＆＃34; （其中addScript动态地将脚本文件添加到document.body）

一个。如果device.platform ==＆＃34; windows8＆＃34;，则MSApp.execUnsafeLocalFunction（function（）{ addScript（＆＃34; Bing.Maps.JavaScript / JS / veapicore.js＆＃34）; addScript（＆＃34; Bing.Maps.JavaScript / JS / veapiModules.js＆＃34）; }）;

湾另外addScript（＆＃34; scripts / frameworks / remoteBingMaps.js＆＃34;）
加载地图控件时（其中loadMap初始化地图控件）

一个。如果是device.platform ==＆＃34; windows8＆＃34;，那么Microsoft.Maps.loadModule（＆＃34; Microsoft.Maps.Map＆＃34;，{callback：loadMap}}

湾否则loadMap（）

我已经将其用于Windows 8.1，Windows Phone，Android和iOS。

Answer 3

代码似乎存在一些问题。

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

其次，你的Bing Maps键最后有一个空格，这就是应用程序在运行时抛出错误的原因。

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

Answer 4

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

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

对于android平台，从index.html中注释掉了Content-Security-Policy，它开始起作用了。

Bing地图在混合应用程序中

4 个答案:

INDEX.HTML

INDEX.JS

注意