• 發行項

2016 年 10 月

第 31 卷，第 10 期

本文章是由機器翻譯。

Bing 地圖服務 - 使用 Bing 地圖服務 8 建立互動式地理應用程式

由 James McCaffrey

企業會產生大量的資料，且該資料的許多包含經度和緯度位置資訊。Bing 地圖第 8 版文件庫，發行年 6 月 2016 有許多新功能，可讓您建立互動式的地理區域應用程式。在本文中我會提供示範一些最有趣的功能，Bing 地圖 8 程式庫的兩個 Web 應用程式。第一個應用程式會反白顯示的一些功能可讓使用者互動，包括新的繪製控制項，以及完整的事件模型功能。第二個應用程式會反白顯示的一些功能可讓使用者處理大量的資料，包括新的資料，叢集模組、 熱量地圖視覺效果。

本文假設您有 Web 應用程式開發的基本認識，但不會假設您知道的任何項目地理位置應用程式或 Bing 地圖 8 文件庫。示範兩個 Web 應用程式只使用標準 HTML 和 JavaScript 標準 — 任何 ASP.NET 和 JavaScript 架構-的--月份沒有。每一個示範兩個 Web 應用程式包含在單一的 HTML 檔案中。完整的原始程式碼和兩個資料檔使用可在隨附的程式碼下載。

看一下第一個 Web 應用程式，在 [圖 1。Web 網頁載入時，在左邊的 HTML 控制項是由地圖以非同步方式擷取時，立即轉譯。對應物件會置中靠近波特蘭，Ore.，並預設樣式紫色圖釘標記放置在地圖的中心。

圖釘和多邊形示範
[圖 1 圖釘和多邊形示範

我接著 HTML5 檔案控制項上按一下 [瀏覽] 按鈕，並指向名為 LatLonData.txt，我 C:\Data 的目錄中的本機電腦上儲存的文字檔。檔案有四個資料點，每個都有一些相關聯的文字。然後按一下 [標示為進行圖釘按鈕控制項上應用程式並讀取文字檔案、 建立四個自訂樣式小橘色圖釘置於對應的左邊。

接下來，我按多邊形中的項目中對應的右上方部分的繪圖工具控制項，以互動方式縣 （市） 的溫哥華，位於美國華盛頓州的正上方繪製四邊的綠色多邊形我畫三邊，第二個多邊形，右邊和下方地圖的中心。繪圖，在 Web 應用程式接聽的繪圖開始和繪圖結束事件，並印出訊息，這些事件引發時。

我按一下標示為繪製的圖形資訊的按鈕控制項和 Web 應用程式擷取資訊以互動方式建立的多邊形，並顯示三個三角形多邊形的頂點。接下來，我移動滑鼠游標經過再離開最底部橘色圖釘。應用程式程式碼攔截 mouseover 和離開，並顯示事件的位置。雖然不是顯示在影像中，當我將滑鼠游標移圖釘，便會出現快顯 Infobox 物件，並 Infobox 當移動滑鼠游標離開時，會自動消失。

我最高的橘色圖釘移動滑鼠游標完成我示範的工作階段和應用程式回應，並建立預設樣式 Infobox 物件顯示圖釘 （文字 「 第一個資料位置 」） 以及圖釘 （45.46、-122.90） 的位置相關聯的資料。

簡而言之，第一個 Web 應用程式示範非同步地圖載入、 動態自訂圖釘、 豐富的事件模型，建立互動式的圖形和 Infobox 物件。

建立圖釘和多邊形示範應用程式

在開始撰寫第一個網頁之前，我會建立使用 [記事本] 的資料來源檔案︰

45.46,-122.90,first location data
45.38,-122.90,second location data
45.42,-122.94,third location data
45.42,-122.86,fourth location data

我沒有達到 < 輸入 > 的資料，因此我檔案讀取的程式碼不會嘗試解譯空白的行文字的最後一行後面的索引鍵。我使用逗號做為欄位分隔符號，但是我也可以使用 tab 字元。我將資料檔案儲存為 LatLonData.txt C:\Data 的目錄中我的本機電腦上。如您所見，Bing 地圖服務可以使用任何種類的資料存放區中。

我可以使用 [記事本] 程式來建立 Web 應用程式的示範。學習新技術，因為它會強制我要小心，而且沒有隱藏的魔法含糊籠統的重要概念時，我喜歡在 [記事本]。

因為我使用只單純的 HTML 和 JavaScript，我並不需要執行任何特殊準備 IIS 或我的電腦。我建立了我的電腦上的 C:\inetpub\wwwroot 目錄中名為 NodeAtlasLight 的目錄。該名稱是任意的您可以使用您像是如果您想要執行示範 Web 應用程式名稱。

我在啟動 [記事本] 使用 [以系統管理員身分執行] 選項，這樣我才能夠儲存我的受保護的 C:\inetpub 根目錄下的程式碼。我命名為應用程式 PushpinsAndPolygonsDemo.html，但 Bing 地圖 8 媒體櫃有沒有必要的命名慣例，因此您可以使用不同的檔案名稱，如果您想。

在顯示 Web 應用程式的整體結構 [圖 2。以下是非常精簡的結構︰

<html>
  <head>
    <script type=‘text/javascript’>
      // All JavaScript here
    </script>
  </head>
  <body>
    <!-- all HTML here -->
    <script type='text/javascript'
      src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
      async defer></script>
  </body>
</html>

主要的程式碼是位於 < 主體 > 區段下方的 < 指令碼 > 標記。您可以解譯此表示，「 載入基本 Bing 地圖 8 文件庫以非同步的方式而 HTML 轉譯。當載入程式庫後時，將控制項傳送至名為 GetMap 的 JavaScript 函式。 」 能夠載入 Bing 地圖 8 媒體櫃同步執行，但非同步載入文件庫的載入速度緩慢，情況下提供更好的 UX。

[圖 2 圖釘和多邊形示範 Web 頁面結構

<!DOCTYPE html>
<!-- PushpinsAndPolygonsDemo.html -->
<html>
  <head>
    <title>Bing Maps 8 Pushpins with Infoboxes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="text/javascript">
    var map = null;
    var pushpins = [];
    var infobox = null;  // Shared infobox for all pushpins
    var ppLayer = null;  // Pushpin layer
    var drawingManager = null;
    var drawnShapes = null;  // an array
    function GetMap() { . . }
    function AddDrawControlEvents(manager) { . . }
    function WriteLn(txt) { . . }
    function LatLonStr(loc) { . . }
    function Button1_Click() { . . }
    function Button2_Click() { . . }
    function ShowInfobox(e) { . . }
    function HideInfobox(e) { . . }
    function CreateCvsDot(radius, clr) { . . }
    </script>
  </head>
  <body style="background-color:wheat">
    <div id='controlPanel' style="float:left; width:262px; height:580px;
      border:1px solid green; padding:10px; background-color: beige">
      <input type="file" id="file1" size="24"></input>
      <span style="display:block; height:10px"></span>
      <input id="button1" type='button' style="width:125px;"
        value='Place Pushpins' onclick="Button1_Click();"></input>
      <div style="width:2px; display:inline-block"></div>
      <input id="textbox1" type='text' size='15' value=' (not used)'></input><br/>
      <span style="display:block; height:10px"></span>
      <input id="button2" type='button' style="width:125px;"
        value='Drawn Shape Info' onclick="Button2_Click();"></input>
      <div style="width:2px; display:inline-block"></div>
      <input id="textbox2" type='text' size='15' value=' (not used)'></input><br/>
      <span style="display:block; height:10px"></span>
      <textarea id='msgArea' rows="34" cols="36"
        style="font-family:Consolas; font-size:12px"></textarea>
    </div>
    <div style="float:left; width:10px; height:600px">
    <div id='mapDiv' style="float:left; width:700px; height:600px;
      border:1px solid red;"></div>
    <br style="clear: left;" />  <!-- magic formatting -->
    <script type='text/javascript'
      src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap'
      async defer></script>
  </body>
</html>

整個網頁的版面配置是由兩個並行的浮動 < d i v > 區域所組成。左側的 < d i v > 保存 HTML 控制項。右邊則 < d i v > 包含對應物件︰

<div id='mapDiv' style="float:left; width:700px; height:600px;
  border:1px solid red;">
</div>

很可能有多個對應物件的特殊案例。相對於指定的地圖寬度和高度使用像素的單位，您也可以使用 CSS3 檢視區單元、 vw 及 vh。為了簡單起見，我將內嵌的所有 HTML 直接樣式，而不是使用不同的 CSS 檔案，在一段案子些許損失。

若要總而言之，Bing 地圖 8 地圖物件使用的程式定義 JavaScript 函式，建立並放在 HTML < d i v > 區域，指定地圖的大小。若要載入地圖，您可以同步或非同步。

初始化 Map 物件

六個全域指令碼範圍的物件上設定 Web 應用程式︰

var map = null;
var pushpins = [];
var infobox = null;
var ppLayer = null;
var drawingManager = null;
var drawnShapes = null;

當我建立的地圖應用程式時，我通常把類似大型 C# 或 Java 類別的架構，因此指令碼範圍 JavaScript 物件通常是由兩個或多個函式所使用。不過，因為 JavaScript 語言的缺點和大量使用回呼函式和封閉區段，我有時候要放到指令碼範圍區域只要函式範圍的物件。

名為對應的物件為對應物件，該名稱不是必要的但會增加或減少標準。圖釘物件是陣列，用以保存所有圖釘。我可以初始化物件為空陣列，而不是設定為 null，大部分都是為了表示物件為陣列。Infobox 物件是將共用所有圖釘 Infobox 類別的單一執行個體。

Bing 地圖 8 新功能之一是圖層的類別。而不是將所有視覺項目放入一個龐大的單一集合，您就可以將 visual 物件組織在圖層。DrawingManager 是 DrawingTools 控制項的參考。DrawnShapes 物件是陣列，以保存使用者所繪製的多邊形物件圖形。

地圖是由 GetMap 函式初始化。定義的開頭︰

function GetMap()
{
  var options = {
    credentials: "AmUck2_xxxx_jSCm",
    center: new Microsoft.Maps.Location(45.50, -122.50),
    mapTypeId: Microsoft.Maps.MapTypeId.road,
    zoom: 10, enableClickableLogo: false, showCopyright: false
  };
...

請注意，我想要充分利用我的程式定義函式區別程式庫函式或內建 JavaScript 函式的名稱。這裡的程式碼會定義一些初始對應設定。這些全部都是選擇性的即使認證項目是基本上有 Bing 地圖服務金鑰。如果您沒有金鑰，您可以使用任何字串那里和對應仍會載入並正常運作，但會有一條細色帶使用訊息對應，在 「 指定的認證不正確。您可以註冊免費的開發人員帳戶 http://www.bingmapsportal.com。 」 建立帳戶，以取得金鑰相對而言較不辛苦，但如果您像我一樣耐心不足，而且您想要立即開始，您可以註冊更新版本。

地圖的中心屬性是設定使用位置的物件，它會接受緯度，後面接著經度，後面接選擇高度相關的兩個值。如果您是新手地理應用程式，您必須小心一點。與一般的幾何點 （x，y） 的 x 值是 「 右 」 值，但在地理應用程式緯度"上下 」 值。

接下來，地圖會顯示，並已備妥主要 Infobox 物件︰

var mapDiv = document.getElementById("mapDiv");
map = new Microsoft.Maps.Map(mapDiv, options);
infobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0),
  { visible: false, offset: new Microsoft.Maps.Point(0,0) });
infobox.setMap(map);

其中一個 Bing 地圖服務的好處之一是，在 API 集使用變數和參數名稱的是，大多數的情況下，很容易了解。Infobox 會放在位置 （0，0），也就是只是空的位置，因為 visible 屬性設定為 false。[位移] 屬性會控制 Infobox 物件底部的小三角形指標的位置。預設值是 （0，0），因此我可以省略了它。

接下來，準備好圖釘︰

ppLayer = new Microsoft.Maps.Layer();
var cpp= new Microsoft.Maps.Pushpin(map.getCenter(), null);
ppLayer.add(cpp);
map.layers.insert(ppLayer);

PpLayer （「 圖釘層 」） 的物件定義要儲存所有圖釘視覺分層。Cpp （「 center 圖釘 」） 會加入至圖層，然後讓圖釘顯示對應加入圖層。這裡是 null，圖釘建構函式的第二個參數可以是 PushpinOptions 物件，將稍後加以說明。傳遞 null 值，讓您的預設圖釘物件，這是紫色，大約 10 個像素為單位的半徑。

Bing 地圖 8 支援將所有的視覺物件放入一個全域集合中的舊版機制。程式碼應該像這樣︰

map.entities.push(cpp);

藉由建立 DrawingTools 控制項，並將它放置到地圖，GetMap 函式完成︰

...
    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function() {
    var tools = new Microsoft.Maps.DrawingTools(map);
    tools.showDrawingManager(AddDrawControlEvents);
  });
}

Bing 地圖 8 大的架構變更為程式庫現在分成 11 個單元。這可讓您載入僅限這些模組在需要時，可以大幅改善效能。代表其他模組包括搜尋、 SpatialMath 和 HeatMap。

LoadModule 函式會接受模組載入時，再加上回呼函式定義，其中包含要載入的模組後執行的程式碼的名稱。可能需要一些熟悉回呼函式，不過像任何其他項目，後面幾個範例使用它們的停止回應。

ShowDrawingManager 函式也接受回呼函式，這次使用的名稱 (AddDrawControlEvents)，而不匿名函式。AddDrawControlEvents 函式定義為︰

function AddDrawControlEvents(manager)
{
  Microsoft.Maps.Events.addHandler(manager, 'drawingStarted',
    function(e) { WriteLn('Drawing has started'); });
  Microsoft.Maps.Events.addHandler(manager, 'drawingEnded',
    function(e) { WriteLn(‘Drawing has ended \n’); });
  drawingManager = manager;
}

此程式碼是簡短但而難以察覺。在單字，「 當使用者開始繪製圖形使用 DrawingTools 控制項 drawingStarted 自動就會引發事件，將使用名為 WriteLn 程式定義函式的訊息。 」 引發事件物件和回呼函式會接受 Events.addHandler 函式。事件引數，e，不能用示範，但是它代表繪製的圖形。

WriteLn 定義為程式定義的函數︰

function WriteLn(txt)
{
  var existing = msgArea.value;
  msgArea.value = existing + txt + "\n";
}

MsgArea 物件是在網頁左邊的 HTML 文字區域標記。此處所使用的方法抓取現有內容，並且將它與附加文字也很粗糙但才會運作良好的文字不會取得大量。

建立及顯示自訂圖釘

當使用者按一下標示為進行圖釘按鈕控制項上時，控制權會傳遞至 Button1_Click 函式。函式的結構是︰

function Button1_Click()
{
  var f = file1.files[0];
  var reader = new FileReader();
  reader.onload = function(e) {
    // Parse each line of result
    // Create pushpins
    // Add event handlers for pushpins
    // Display pushpins
  }
  reader.readAsText(f);
}

本機物件 f 會有瀏覽控制項的 HTML file1 物件指向的實體檔案的相關資訊。HTML 檔案 API 可讓多個選取的檔案，因為第一個檔案當作檔案 [0]。FileReader 物件會以非同步方式載入的檔案，讓網頁將仍能繼續回應。當檔案已經讀入記憶體時，就會引發 onload 事件。請注意，您會定義在讀取檔案，然後再呼叫 readAsText 函式在真正開始讀取檔案之後要怎麼做。

匿名函式時執行 onload 事件引發的開頭︰

WriteLn("Source data = \n");
var lines = reader.result.split('\n');
for (var i = 0; i < lines.length; ++i) {
  var line = lines[i];
...

檔案內容會儲存在 reader.result 物件，做為一個大型內嵌 '\n' 字元字串。String.split 函式用來擷取到陣列的每一行。線條會逐一查看的 length 屬性搭配使用 for 迴圈。下一個：

var tokens = line.split(',');
WriteLn(tokens[0] + " " + tokens[1] + " " + tokens[2]);
var loc = new Microsoft.Maps.Location(tokens[0], tokens[1]);

回想一下，資料檔案的行看起來像︰

45.46,-122.90,first location data

在逗號分隔符號分割每一行並將三個結果儲存至名為語彙基元，讓位於語彙基元 [0] 的緯度和經度位於語彙基元 [1] 的陣列。因為許多出錯讀取文字檔時，生產系統中您會有可能包裝嘗試建立 JavaScript try-catch 區塊中的位置物件。

接下來，建立自訂的圖釘文字的目前行的資料︰

var ppOptions = { icon: CreateCvsDot(6, "orangered"),
  anchor: new Microsoft.Maps.Point(6,6), subTitle: tokens[2] };
var pp = new Microsoft.Maps.Pushpin(loc, ppOptions);
pushpins[i] = pp;

將資訊傳遞到 PushpinOptions 物件的圖示屬性時，會建立自訂的圖釘。在這裡，透過呼叫程式定義的函數，名為 CreateCvsDot 建立半徑為 6 個像素的自訂橙色紅色色彩圖示。我也將目前圖釘的子標題屬性的文字從遵循 lat lon 欄位的資料檔案。建立圖釘後，就會新增到全域圖釘的陣列。

匿名函式程式碼結束︰

...
  Microsoft.Maps.Events.addHandler(pushpins[i], 'mouseover', ShowInfobox);
  Microsoft.Maps.Events.addHandler(pushpins[i], 'mouseout', HideInfobox);
}
ppLayer.add(pushpins);
map.layers.insert(ppLayer);
WriteLn("");

每個圖釘會有使用程式定義函數 ShowInfobox 和 HideInfobox 修改其 mouseover 和離開事件。建立所有圖釘之後，陣列會保留它們新增圖釘層，然後插入地圖，顯示圖釘。

函式 CreateCvsDot （「 建立 HTML 畫布點 」） 被定義為︰

function CreateCvsDot(radius, clr)  {
  var c = document.createElement('canvas');
  c.width = 2 * radius; c.height = 2 * radius;
  var ctx = c.getContext("2d");
  ctx.beginPath();
  ctx.arc(radius, radius, radius, 0, 2 * Math.PI);
  ctx.fillStyle = clr; ctx.fill();
  return(c.toDataURL());
}

函式接受 radius 和色彩，並傳回 HTML5 畫布物件。有四種方法建立自訂的圖釘圖示。您可以使用靜態影像，例如.png 檔案。您可以使用靜態影像編碼使用 Base64 格式。您可以建立動態 HTML 畫布物件。或者，您可以建立動態可縮放向量圖形 (SVG) 物件。

建立即時的圖釘圖示的能力提供很大的彈性。例如，您可以建立不同的色彩和大小圖示時，根據您的地圖區域的圖釘密度或根據地圖的縮放層級。

事件處理常式函式 ShowInfobox 定義如下︰

function ShowInfobox(e)
{
  var loc = e.target.getLocation();
  WriteLn('\n mouseover at ' + loc);
  infobox.setLocation(loc);
  infobox.setOptions( { visible: true, title: e.target.getSubTitle(),
    description: LatLonStr(loc) });
}

當使用者將滑鼠游標移圖釘時，圖釘 mouseover 事件就會引發，控制項就會傳送到 ShowInfobox。函式取得事件/圖釘的位置，並使用它來放置圖釘。還記得副標題屬性的每個圖釘容納文字，例如 「 第一個資料位置 」。 此文字做為 Infobox 標題。

Infobox [描述] 屬性設定為 [圖釘] 格式化使用的程式定義的 helper 函式 LatLonStr 的兩個小數位數的位置︰

function LatLonStr(loc)
{
  var s = "(" + Number(loc.latitude).toFixed(2) + ", " +
    Number(loc.longitude).toFixed(2) + ")";
  return s;
}

HideInfobox 函式是︰

function HideInfobox(e)
{
  WriteLn(' mouseout at ' + e.target.getLocation());
  infobox.setOptions({ visible: false });
}

當使用者將滑鼠游標離開圖釘時，圖釘離開事件就會引發，控制項就會傳送到 HideInfobox。Visible 屬性是設定為 false，因此 Infobox 看不到，但仍在地圖中。

擷取互動式圖形

當使用者按一下標示為繪製的圖形資訊的按鈕控制項上時，控制權會轉移至 Button2_Click 函式。函式定義為︰

function Button2_Click()
{
  drawnShapes = drawingManager.getPrimitives();
  var numShapes = drawnShapes.length;
  var mostRecent = drawnShapes[numShapes-1];  // Polygon
  var vertices = mostRecent.getLocations();
  WriteLn("There are " + numShapes + " drawn shapes");
  WriteLn("Vertices of most recent drawn shape: ");
  for (var i = 0; i < vertices.length; ++i) {
    WriteLn(LatLonStr(vertices[i]));
  }
}

DrawingTools 控制項放置在地圖上時，所建立的全域 drawingManager 物件。它用來擷取陣列，其中包含所有繪圖控制項所畫的圖形。繪製在最後一個圖形會在陣列中的最後一個項目。程式碼假設繪製的圖形類型的多邊形，但 DrawingTool 控制項可以建立不同類型的物件。您也可以檢查類似的程式碼的圖形類型︰

var isPoly = mostRecent instanceof Microsoft.Maps.Polygon;

函式所擷取的最後一個使用 getLocations 函式中，繪製圖形頂點完成並逐一查看的頂點來顯示它們。

熱門地圖示範

當我使用地理應用程式時，我心中加以分類根據我在與此處理的資料點數目。使用大量的位置可能十分困難。Bing 對應 8 媒體櫃中有兩個很棒的方式使用大量的位置 — 叢集圖釘和熱量分佈圖。看一下示範熱量分佈圖中 [圖 3。

熱門地圖示範
[圖 3 熱量分佈圖示範

有幾種熱門地圖，但一種常見的類型會顯示不同的色彩代表不同的資料密度的位置中使用色彩漸層的結合的資料點。示範 Web 應用程式一開始會載入在置中的對應 （37.50、-118.00），並將預設的大型紫色圖釘放在中心。

首先，我按 HTML5 檔案瀏覽] 按鈕，並指向名為 NV_Cities.txt 包含縣 （市） 資料的本機檔案。接下來，我按一下第一個按鈕控制項，載入並顯示狀態的 Nevada 城市密度熱量分佈圖。然後我會清除該熱量分佈圖，使用第二個按鈕控制項。

接下來，我再按一下瀏覽] 按鈕控制項上，指向名為 CA_Cities.txt 的定位鍵分隔文字檔案。該資料檔案包含 1,522 城市加州和其相對應的緯度-經度資訊清單。然後我按下顯示熱量分佈圖按鈕控制項，會讀取文字檔，剖析出 lat lon 資料並儲存該資料轉換為陣列。然後 lat lon 資料顯示為熱量分佈圖，產生的縣 （市） 密度視覺效果。

熱門地圖示範應用程式的結構是幾乎一模一樣的圖釘和多邊形示範結構。通用指令碼範圍物件如下︰

var map = null;
var ppLayer = null;
var hmLayer = null;
var reader = null;   // FileReader object
var locs = [];
var cGrad = { '0.0': 'black', '0.2': 'purple', '0.4': 'blue', '0.6': 'green', 
  '0.8': 'yellow', '0.9': 'orange', '1.0': 'red' };
var hmOptions = { intensity: 0.65, radius: 7, colorGradient: cGrad };

HmLayer 物件是熱量分佈圖的圖層。Locs 陣列保留定義熱量分佈圖位置物件。CGrad 物件定義自訂色彩漸層的熱度對應選項。HmOptions 定義熱量分佈圖的選項。使用自訂的 HeatMapOptions 物件是選擇性的但在大部分情況下您會想要使用的選項來控制熱量分佈圖的外觀。

以下是函式 Button1_Click 讀取並剖析來源資料檔中的程式碼︰

var lines = reader.result.split('\n');
for (var i = 0; i < lines.length; ++i) {  // Each line
  var line = lines[i];
  var tokens = line.split('\t');  // Split on tabs
  var loc = new Microsoft.Maps.Location(tokens[12], tokens[13]);
  locs[i] = loc;
}

來源資料檔案看起來如下︰

CA  602000  2409704  Anaheim city    ( . . )  33.855497  -117.760071
CA  602028  2628706  Anchor Bay CDP  ( . . )  38.812653  -123.570267
...

每一行有 14 tab 鍵分隔的值。第一個值是州名縮寫。下面兩個欄位是識別碼。第四個欄位是位置名稱，它可以是城市、 城鎮或人口普查指定的位置 (CDP)。會有八個欄位包含資訊，例如美國人口普查母體擴展的計數和陸地區域。最後兩個欄位是緯度和經度。我的資料與美國人口普查網站 bit.ly/29SETIU。

建立及顯示熱量分佈圖的程式碼是︰

Microsoft.Maps.loadModule('Microsoft.Maps.HeatMap', function() {
  hmLayer = new Microsoft.Maps.HeatMapLayer(locs, hmOptions);
  map.layers.insert(hmLayer);
});

HmLayer 會建立圖層使用全域物件的陣列位置與 hmOptions 物件，其中包含自訂的色彩漸層。很棒吧！

Button2_Click 函式的程式碼會移除目前的熱量分佈圖︰

function Button2_Click()
{
  WriteLn('Clearing heat map' + "\n");
  hmLayer.clear();
  reader = null;
  locs = [];
}

此程式碼說明如何使用圖層物件的優點之一。而不必逐一 Map.entities 集合中每個物件，您可以直接存取特定的圖層中的物件。

圖釘叢集

我最喜歡的新功能，在 Bing 地圖 8 是叢集的圖釘。最適合以視覺化方式說明概念。在 [圖 4, ，名為 ClusteredPushpinsDemo.html 的網頁載入具有 10、 置中靠近波特蘭，Ore.初始的縮放層級的對應當我按一下標示為產生的 pin 碼的按鈕控制項上時，應用程式會用於 Maps.TestDataGenerator getLocations 函式建立 6000 隨機的位置。然後應用程式程式碼建立叢集的圖釘，並顯示它們。紅色圓圈表示在相關聯的地圖區域中，有 100 個以上的圖釘，藍色的圖釘表示 10 到 99 個圖釘。

圖釘叢集與縮放層級 10
[圖 4 圖釘叢集與縮放層級 10

接下來，我放大三個層級。叢集會自動在每個縮放變更時發生。在縮放層級 13 (請參閱 [圖 5) 個別圖釘成為顯示為小型的紅點，而綠色圓圈指示該位置有 2 到 9 個圖釘。

圖釘叢集與縮放層級 13
[圖 5 圖釘叢集與縮放層級 13

熱門地圖和圖釘叢集可讓您管理大量的位置項目。但使用圖釘叢集可讓使用者存取個別項目。

總結

此處所提供的示範 Web 應用程式應可提供的新大對應 8 文件庫就像個不錯的主意。有許多其他的新功能，我沒有討論到，包括 Infobox 自訂、 圖格圖層、 地理搜尋和空間的數學函式。如果您想要深入了解 Bing 地圖 8，我建議至互動式 SDK Web 站台 binged.it/29SFytX。它會顯示大約 137 很短，但是完成說明 Bing 地圖 8 的許多重要功能的網頁。您也可找到的官方文件 aka.ms/BingMapsV8Docs 是非常完善且有用的。

我使用了兩個主要的替代方案，Bing 地圖 8 文件庫、 Google 對應程式庫和開放原始碼 Leaflet.js 程式庫。所有三個程式庫都太棒了，但我覺得 Bing 地圖 8。有些技術只有 「 正確操作 」 它們和我，最少，Bing 地圖 8 現在是我慣用的程式庫的地理區域應用程式。

Dr。James McCaffrey 適用於在美國華盛頓州 Redmond 的 Microsoft Research 他曾在數個 Microsoft 產品，包括 Internet Explorer 和 Bing。他可以到達 jammc@microsoft.com。

感謝下列 Microsoft 技術專家檢閱這份文件︰ Ricky Brundritt （Bing 地圖） 和 John Krumm (Microsoft Research)