推薦一個不錯的網站：http://garzilla.net/vemaps/。介紹了一些Bing 地圖服務（Bing Maps）的開發例子。在以前的講座中曾經介紹過如何在地圖上顯示一段固定的折線，但是很多時候使用者希望通過滑鼠在地圖上畫折線。這個需求有很多應用情境，比如自訂一條駕車路線，或者記錄旅遊線路等。在上一篇講座中介紹了如何在Bing 地圖服務上載入滑鼠事件，即通過滑鼠拖拽一個表徵圖。這個講座我們將繼續使用到滑鼠事件，並且增加一個鍵盤響應事件。這個講座所採用的例子可以實現：使用者點擊“畫線”按鈕，開始用滑鼠在地圖上畫折線，按ESC鍵終止畫線。首先定義幾個變數： var polyline = null; //所要畫的折線
var polylineMask = null; //畫折線過程中臨時產生的虛線
var points = new Array(); //
var maskPoints = new Array(new VELatLong(0, 0), new VELatLong(0, 0)); //
var drawing = false; //狀態指示（布爾類型）在這個例子中，我們用到三個事件： // Attach the event handlers to the mouse
myMap.AttachEvent("onmousedown", mouseDownHandler);
myMap.AttachEvent("onmousemove", mouseMoveHandler);
myMap.AttachEvent("onkeypress", keyPressHandler);如果想瞭解Bing 地圖服務事件的詳細資料，請訪問http://msdn.microsoft.com/en-us/library/bb412543.aspx。 然後定義一個畫折線的函數，當使用者點擊“畫線”按鈕的時候調用這個函數： function startDrawing() {
if (polyline && !drawing) //判斷polyline已經存在並且是否處於畫線狀態，確保將以前畫的折線清除
{
map.DeleteShape(polyline);
polyline = null;
points.length = 0;
} map.vemapcontrol.EnableGeoCommunity(true); //關閉原有的地圖滑鼠響應功能
drawing = true; //設定進入畫線狀態
document.getElementById("myMap").style.cursor = 'crosshair'; //改變滑鼠形狀，畫折線時滑鼠變為十字形
document.getElementById("draw").value = 'Press ESC to exit drawing mode'; //改變按鈕所顯示的文字
document.getElementById("draw").disabled = true; //設定“畫線”按鈕不可按
}此時進入畫線狀態。如果點擊的是折線的第一個端點，則只需要記錄改點位置；否則，畫出當前點與最近一次點擊的點之間的線段。定義滑鼠左鍵按下功能的具體實現： function mouseDownHandler(e) {
if (drawing) {
currentLatLon = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY)); //記錄當前滑鼠所點擊的位置
points.push(currentLatLon); //將滑鼠所點擊的位置儲存在堆棧中
maskPoints[0] = currentLatLon; //將當前點作為虛線的起點 if (points.length > 1) { //如果堆棧中已經記錄了至少一個點，則可以畫線
if (!polyline) { //如果還沒有初始化polyline對象，則需要初始化
polyline = new VEShape(VEShapeType.Polyline, points);
polyline.HideIcon();
map.AddShape(polyline); maskPoints[1] = currentLatLon
} else { polyline.SetPoints(points); } //如果已經初始化過polyline對象，則只需要根據堆棧中所記錄的點的位置更新折線形狀
}
}
}在畫折線的過程中，使用者移動滑鼠來確定下一個折線段的位置，移動過程中線段用虛線表示。滑鼠移動事件的功能函數： //onmousemove handler
function mouseMoveHandler(e) {
if (drawing) {
var loc = map.PixelToLatLong(new VEPixel(e.mapX, e.mapY)); //滑鼠移動時，擷取當前位置的經緯度
if (points.length > 0){polylineMask.Show()}; //如果堆棧中已經記錄了點，則顯示虛線
maskPoints[1] = loc
polylineMask.SetPoints(maskPoints);
}
}
接下來要完成的工作是如何結束畫線狀態。此處我們通過按ESC鍵來結束，當然很多應用中也可以採用雙擊滑鼠來終止。但是考慮到Bing 地圖服務的雙擊功能時放大地圖，所以推薦用ESC鍵來結束畫線。鍵盤響應功能的具體實現： function keyPressHandler(e){
if (drawing && e.keyCode == 27 ){ //如果當前處於畫線狀態，且捕捉到的鍵盤響應代碼為27（ESC鍵），則終止畫線狀態
drawing = false; //結束畫線狀態
map.vemapcontrol.EnableGeoCommunity(false);
document.getElementById("myMap").style.cursor = '';
document.getElementById("draw").value = 'Click to begin drawing';
document.getElementById("draw").disabled = false;
polylineMask.Hide();
}
本例子的完整代碼比較長，就不在這兒貼出來了。有需要代碼的和我聯絡：acnchen@hotmail.com
