在使用 Bing 地圖服務路線最佳化程式範例中使用 JavaScript
Bing 地圖服務路線最佳化程式的 HTML 與 JavaScript 部分可定義使用者介面。 UI 會向使用者收集位置資料，並在 Bing Maps AJAX 控制項上顯示所有位置之間的最短路由。 本文件說明應用程式 JavaScript 部分的組織方式，以及本機內容與 Web 內容之間的通訊方式。 此外也說明您必須留意的某些移轉要點。
JavaScript 部分會使用標準 CSS、HTML 與 JavaScript 來定義 UI。 本文件並未詳細說明這些項目。 但是，本文件將說明造成 JavaScript Web 應用程式與 JavaScript Windows 市集應用程式差異的元素。
.gif "注意事項") 注意事項 |
|---|
與本文件對應的範例程式碼可以在 Bing 地圖服務路線最佳化程式範例中找到。 |
本文內容
本機內容與 Web 內容
從本機內容參考 Web 內容
內容之間的通訊
從 ActiveX 移轉
後續步驟
本機內容與 Web 內容
使用 JavaScript 的 Windows 市集 應用程式至少包含一個 HTML 網頁。 一般而言，這個網頁和您在應用程式中包含的其他所有網頁都是在應用程式的本機內容中執行。 當您使用 iframe 巡覽至遠端頁面時，這個網頁會在 Web 內容中執行，並且在存取您的系統時會受到限制。 若想進一歩了解本機與 Web 內容的頁面上有哪些不同的限制與可用功能，請參閱Features and restrictions by context。
Bing Maps Trip Optimizer 將 UI 分成兩組 HTML、CSS 與 JavaScript 檔案。 我們認為將參考 Windows 執行階段的程式碼與參考 Web 的程式碼分開，可讓應用程式更容易維護。 default.html、default.css 和 default.js 檔案會參考 Windows 執行階段 (其中包含自訂 C++ Windows 執行階段元件) 但是不會存取 Web。default.html、default.css 和 default.js 代表應用程式的主頁面。 web.html、web.css 和 web.js 檔案會存取 Web，但是卻不會存取 Windows 執行階段。 web.html 的內容是本機內容的內嵌框架。
下圖說明本機內容與 Web 內容之間的關聯性。 這些內容的通訊方式，將在本文件稍後討論。
.png "本機和 Web 內容")
.gif "安全性注意事項") 安全性提示 |
|---|
在個別的模組中維護 Web 程式碼，也有助於提高應用程式的安全性。如果情況允許，請驗證您從 Web 內容接收的本機內容資料，以盡可能降低出現安全性弱點 (如緩衝區滿溢) 的風險。 |
[頂端]
從本機內容參考 Web 內容
本機內容 (default.html) 的 body 標記可定義含有 Web 內容 (web.html) 的內嵌框架 (iframe) 標記。
<iframe id="mapFrame" src="ms-appx-web:///html/web.html" style="position: absolute; left: 0px; width: 100%; top: 0px; height: 100%; overflow: hidden"></iframe>
當您在 JavaScript Windows 市集應用程式中參考程式碼檔案時，請務必使用下列語法：
src="ms-appx-web://<package-name>/<file-name>"
如果目標檔案與呼叫端檔案屬於相同的封裝，您可以省略 <package-name> 部分。 您可以在應用程式資訊清單中尋找封裝名稱。 若要執行此作業，請在 Visual Studio 中開啟 package.appxmanifest 檔案，然後選擇 [封裝] 索引標籤。 如需以 JavaScript 撰寫之 Windows 市集應用程式的新巡覽功能的詳細資訊，請參閱 Quickstart: Using single-page navigation。
[頂端]
內容之間的通訊
本機內容與 Web 內容可使用跨文件訊息進行通訊。 這些內容必須先進行訊息事件登錄，才能通訊。 default.html 與 web.html 都可為 body 標記的 onload 屬性指定 onLoad 函式。 兩個 onLoad 函式都可呼叫 addEventListener 方法，以接聽 message 型别的事件，並將這些訊息傳送至 receiveMessage 函式。 下列範例將說明本機內容的 onLoad 函式。
function onLoad() {
"use strict";
window.addEventListener("message", receiveMessage, false);
}
重要
由於一個內容無法直接存取另一個內容的 DOM，因此 Bing 地圖服務路線最佳化程式會使用跨文件訊息。
內容進行訊息事件的登錄後，即可使用 postMessage 方法進行通訊。 此方法會傳送跨文件訊息，將其路由至其他內容的訊息事件處理常式，即 receiveMessage 函式。 由於跨文件訊息是以文字為基礎的，因此應用程式與 Web 內容會使用 JSON.stringify 函式，將訊息序列化為 JSON 文字。 內容收到訊息時隨即呼叫 JSON.parse 函式，將欄位從 JSON 文字還原序列化。
為了說明內容的通訊方式，請考量 Web 內容如何與本機內容通訊以初始化自訂 C++ Windows 執行階段元件，(提醒您，Web 內容無法直接與 Windows 執行階段元件互動)。 在初始化期間，會呼叫 Web 內容 web.js 中定義的 onLoad 函式。
web.js
// Called when the page loads.
function onLoad() {
"use strict";
// Hook to main frame for incoming messages.
window.addEventListener("message", receiveMessage, false);
// Disable input.
disableElement(inputArea, true);
// Load the C++ component.
optimizerLoad();
// Load a default map.
Microsoft.Maps.loadModule('Microsoft.Maps.Overlays.Style', {
callback: function () {
map = new Microsoft.Maps.Map(document.getElementById("mapDiv"), {
mapTypeId: "r",
center: new Microsoft.Maps.Location(45.5, -80.5),
zoom: 4,
enableClickableLogo: false,
enableSearchLogo: false,
customizeOverlays: true,
showBreadcrumb: true
});
}
});
// Reset waypoints.
resetWaypoints();
}
onLoad 函式會呼叫 optimizerLoad 函式。 optimizerLoad 函式會與本機內容通訊，以初始化 C++ Windows 執行階段元件。
web.js
function optimizerLoad() {
"use strict";
var message = { "invoke": "load" };
window.parent.postMessage(JSON.stringify(message), "*");
}
我們會從 Web 內容啟始 Windows 執行階段元件的載入，而非直接從本機內容載入，以確保這兩種內容都會在 Windows 執行階段元件建立前載入。
本機內容中的 receiveMessage 函式會剖析訊息，並將呼叫路由至適當的訊息處理常式。 在此案例中，JavaScript 物件在還原序列化後的 invoke 欄位為 "load"，因此本機內容會呼叫 optimizerLoad 函式。
default.js
function receiveMessage(message) {
"use strict";
// Verify event origin.
if (message.origin !== "ms-appx-web://microsoft.sdksamples.tripoptimizer.js") {
return;
}
var data = JSON.parse(message.data);
if (data.invoke === "load") {
optimizerLoad();
} else if (data.invoke === "optimizeTrip") {
optimizerOptimizeTrip(
data.locations,
data.travelMode,
data.optimize,
data.bingMapsKey,
data.alpha,
data.beta,
data.rho,
data.iterations,
data.parallel);
} else if (data.invoke === "cancel") {
optimizerCancel();
} else if (data.invoke === "alert") {
// Show message dialog.
new Windows.UI.Popups.MessageDialog(data.message).showAsync().then();
}
}
本機內容中的 optimizerLoad 函式在 在使用 Bing 地圖服務路線最佳化程式範例中 JavaScript 和 C++ 的互通性 中有詳盡的說明。
[頂端]
從 ActiveX 移轉
如需如何從 ActiveX 版本的 Bing 地圖服務路線最佳化程式移轉至 Windows 市集應用程式的詳細資訊，請參閱移轉使用 Bing 地圖服務之路線最佳化程式範例中的程式碼。
[頂端]
後續步驟
請參閱在使用 Bing 地圖服務路線最佳化程式範例中使用 C++，以了解 Bing 地圖服務路線最佳化程式如何使用 C++ 執行密集運算作業，進而改善整體效能。
[頂端]