2

我的 WinJS Windows 8 应用程序的页面上有 Bing 地图。

地图有几个图钉，每个图钉都有自己的信息框。单击图钉时，它会正确显示信息框及其内容。内容包含链接到 Windows 8 应用程序中不同页面的超链接。应用程序可以正确导航到此页面，但是后退按钮停止工作，并且也无法访问应用程序栏。（导航到页面通常可以正常工作）

我认为页面导航方式和导航器记录状态的方式出了点问题。我是新手，所以它也可能只是一个愚蠢的问题。

这是页面的 .js 文件中的代码：

    // For an introduction to the Page Control template, see the following documentation:
// http://go.microsoft.com/fwlink/?LinkId=232511
(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/testBing/testBing.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) {
            // TODO: Initialize the page here.
            Microsoft.Maps.loadModule('Microsoft.Maps.Map', { callback: initMap });
        }
    });


})();

var pinInfobox = null;

function initMap() {
    try {
        var mapOptions =
        {
            credentials: "credentials",
            center: new Microsoft.Maps.Location(-33.961176, 22.420985),
            mapTypeId: Microsoft.Maps.MapTypeId.road,
            zoom: 5
        };
        var mapDiv = document.querySelector("#mapdiv");
        map = new Microsoft.Maps.Map(mapDiv, mapOptions);
        centerPosition();
    }
    catch (e) {
        var md = new Windows.UI.Popups.MessageDialog(e.message);
        md.showAsync();
    }
}

function addPushPin(location) {
    map.entities.clear();
    var pushpin = new Microsoft.Maps.Pushpin(location, null);

    pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { title: 'My Pushpin', visible: true, description: "<a href='/pages/player/player.html'>Profile</a>" });
    Microsoft.Maps.Events.addHandler(pushpin, 'click', displayInfobox);
    Microsoft.Maps.Events.addHandler(map, 'viewchange', hideInfobox);

    map.entities.push(pushpin);
    map.entities.push(pinInfobox);
}


function hideInfobox(e) {
    pinInfobox.setOptions({ visible: false });
}

function centerPosition() {
    var geolocator = new Windows.Devices.Geolocation.Geolocator();
    geolocator.getGeopositionAsync().then(function (loc) {
        var mapCenter = map.getCenter();
        mapCenter.latitude = loc.coordinate.latitude;
        mapCenter.longitude = loc.coordinate.longitude;
        map.setView({ center: mapCenter, zoom: 15 });
        addPushPin(mapCenter);


    });
}

function displayInfobox(e) {
    pinInfobox.setOptions({ title: e.target.Title, innerHTML: e.target.Description, visible: true, offset: new Microsoft.Maps.Point(0, 25) });
    pinInfobox.setLocation(e.target.getLocation());
}

HTML只有以下内容

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!--Bing Mapps Reference -->
     <script type="text/javascript" src="ms-appx:///Bing.Maps.JavaScript//js/veapicore.js"></script>

    <link href="testBing.css" rel="stylesheet" />
    <script src="testBing.js"></script>
</head>
<body>
    <div class="testBing fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">Welcome to testBing</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div id="mapdiv"></div>
        </section>
    </div>
</body>
</html>
4

1 回答 1

0

Dominic Hopton 的评论是正确的： foo.html 作为整个页面加载，而不是作为应用导航过程的一部分。如果链接应该进行应用导航（而不是在外部 Web 浏览器中打开），您可以将此代码添加到页面的就绪函数中，以将链接点击转换为导航事件。

WinJS.Utilities.query("a").listen("click", function (e) {
    e.preventDefault();
    nav.navigate(e.target.href);
});

如果您有一些应该导航的链接和一些应该在浏览器中打开的链接，您可以修改查询。例如，如果可以将 CSS 类添加到应在 Web 浏览器中打开的链接，则可以将查询更改为：

WinJS.Utilities.query("a:not(.defaultClick)")

您还可以修改查询以检查链接的 href 属性以检查“http”，如下所示：

WinJS.Utilities.query("a:not([href^=http])")

我还没有测试最后一个示例，但是如果它像我怀疑的那样工作，它将有一个以“http”开头的链接（因此包括“https”）行为正常，而所有具有相对 URL 或包 URL 将被转换为导航事件。

我不建议您盲目地这样做，但根据您的应用程序，这个简单的快捷方式可能会改变行为以符合您的期望。

于 2013-02-20T17:42:57.047 回答