2

WinJS Windows 8 アプリケーションのページに Bing Maps があります。

マップにはいくつかのピンがあり、それぞれに独自のインフォボックスがあります。ピンをクリックすると、インフォボックスがその内容とともに正しく表示されます。コンテンツには、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);
});

ナビゲートするリンクとブラウザで開くリンクがある場合は、クエリを変更できます。たとえば、Web ブラウザーで開く必要があるリンクに CSS クラスを追加できる場合は、クエリを次のように変更できます。

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 に答える