4

我正在尝试将 Google 地图加载到 Windows Store 应用程序中。但是，本机 Windows RT 函数存在问题：Windows.UI.Popups.MessageDialog。我猜测 Windows 命名空间超出了范围，但我现在不知道如何将此函数放入一个可以使 Windows 命名空间可访问的范围内。任何帮助表示赞赏。

编辑：我对此想得越多，我就越认为这与我正在加载 map.html 作为 iFrame 的源这一事实有关。所以 map.html 的上下文是一个 iFrame，而不是 Windows Store App 页面。我猜 Windows 命名空间在 iFrame 中不可用？

来自 home.html：

            <iframe id="getLocationFrame" src="ms-appx-web:///pages/map/map.html" style="width:600px; height:600px;"></iframe>

例外：

SCRIPT5009：ms-appx-web://76ad865e-25cf-485c-bc77-e18186bfd7ee/pages/map/map.js 0x800a1391 第 50 行第 17 列未处理的异常 - JavaScript 运行时错误：“Windows”未定义文件：map .js，行：50，列：17

地图.html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script type="text/javascript" src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?  sensor=false"></script>        
    <script type="text/javascript" src="map.js"></script>

    <link href="/pages/map/css/map.css" rel="stylesheet" />
    <link href="//Microsoft.WinJS.1.0/css/ui-light.css" rel="stylesheet" />
</head>
<body>
    <p>Click to get your location.</p>
    <button id="getLocation">Get Location</button><br/>
    <div id="mapcontainer"></div><br />
    <small>
        <a id="anchorLargerMap" href="" style="color:#0000FF;text-align:left" target="_blank">View Larger Map</a>
    </small>
</body>
</html>

地图.js：

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/map/map.html", {

    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {
        //Button "getLocation" event handler
        function getLocationClickHandler(eventInfo) {
            var myOptions = {
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var mapcontainer = document.getElementById("mapcontainer");
            var map = new google.maps.Map(mapcontainer, myOptions);

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(locationSuccess, locationFail);
            }
        }

        var namespacePublicMembers = {
            locationSucessFunction: locationSuccess,
            locationFailFunction: locationFail,
            getLocationClickEventHandler: getLocationClickHandler
        };

        WinJS.Namespace.define("mapPage", namespacePublicMembers);
        var getLocationButton = document.getElementById("getLocation");
        getLocationButton.addEventListener("click", getLocationClickHandler, false);

        function locationSuccess(position) {
            var initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            map.setCenter(initialLocation);
            var marker = new google.maps.Marker({
                position: initialLocation,
                map: map,
                title: "You are here."
            });

            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var url = "http://maps.google.com/maps?q=" + latitude + "," + longitude + "&zoom=13&markers=" + latitude + "," + longitude;
            $("#anchorLargerMap").attr('href', url);
        }

        function locationFail() {
            var md = new Windows.UI.Popups.MessageDialog("Could not find you!", "").showAsync;  -- ********* THIS LINE THROWS EXCEPTION *********
        }
    }
});
})();
4

2 回答 2

4

在 Web 隔间中执行的代码（您的 URL 表明该代码所在的位置）无法访问 WinRT 组件。您需要使用 postMessage 等在两个安全上下文之间进行通信。

于 2012-12-24T21:42:42.207 回答
3

来自 Map.js：

        function locationFail() {
            //Can't do this due the the iFrame container
            //var md = new Windows.UI.Popups.MessageDialog("Could not find you!", "").showAsync;
            window.parent.postMessage("Could not find you!", "*");
        }

来自 Home.js：

(function () {
"use strict";

WinJS.UI.Pages.define("/pages/home/home.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {

        window.addEventListener("message", messageReceived, false);

        function messageReceived(e) {
            if (e.origin === "ms-appx-web://76ad865e-25cf-485c-bc77-e18186bfd7ee") {
                var md = new Windows.UI.Popups.MessageDialog(e.data, "");
                md.showAsync();
            }
        };
    }
});
})();

我从这个博客得到了解决方案：http: //css.dzone.com/articles/use-winjs-post-message-iframe

于 2012-12-26T15:13:46.453 回答