目前網(wǎng)上涌現(xiàn)出眾多電子地圖，這些電子地圖操作方便，具備數(shù)據(jù)查詢、距離測(cè)量甚至精確定位等傳統(tǒng)地圖所不具備的強(qiáng)大功能。
　　現(xiàn)有的電子地圖多數(shù)用Java開(kāi)發(fā)的，功能強(qiáng)大，操作便捷。比較典型就是Mapbar(mapbar.com)與Mapabc(mapabc.com)、靈圖(lingtu.com)。
　　此外，還有一部分是用Flash制作的電子地圖，比如網(wǎng)格深圳(wanggesz.com)、九江電子地圖(jjmap.cn)、江門(五邑)地圖(5emap.com)、衡陽(yáng)電子地圖(hyemap.com)等。

　　Java與Flash相比具有明顯的優(yōu)勢(shì)，是電子地圖技術(shù)的主流方向。不過(guò)使用Java地圖的客戶端必須安裝Java虛擬機(jī)，對(duì)于沒(méi)有安裝相關(guān)插件的電腦用戶來(lái)說(shuō)，并不能立即使用Java電子地圖。

　　但對(duì)于非專業(yè)的愛(ài)好者來(lái)說(shuō)，F(xiàn)lash比Java更容易掌握一些。特別對(duì)于繪制樓盤、小區(qū)或是小城市的地圖，并沒(méi)有太多太強(qiáng)的功能要求，使用Flash制作已經(jīng)足夠了。
　　對(duì)于Flash電子地圖來(lái)說(shuō)，幾乎所有的個(gè)人電腦都安裝了Flash Player插件，只要打開(kāi)瀏覽器即可正常使用。因此對(duì)于非專業(yè)的愛(ài)好者來(lái)說(shuō)，無(wú)論使用或是學(xué)習(xí)制作Flash電子地圖更為現(xiàn)實(shí)一些。只要掌握了一定Flash Actionscript的基礎(chǔ)知識(shí)，都可以通過(guò)學(xué)習(xí)制作出自己滿意的互動(dòng)電子地圖。
　　
　　本系列專題將為大家逐步系統(tǒng)地介紹使用Macromedia Flash Professional制作Flash電子地圖的知識(shí)，以供大家交流學(xué)習(xí)。
　　今天我們就從最簡(jiǎn)單的電子地圖開(kāi)始，我們以制作某地區(qū)的地圖為例逐步由淺入深講解制作步驟。完成效果如下。

最簡(jiǎn)單的Flash電子地圖
點(diǎn)擊左邊五個(gè)功能按鈕可以得到相應(yīng)功能
測(cè)距時(shí)用鼠標(biāo)在地圖中需要測(cè)距的起點(diǎn)單擊按住拖動(dòng)到終點(diǎn)松開(kāi)即可

　　一、確定地圖功能

　　首先，我們必須確定這個(gè)電子提圖需要實(shí)現(xiàn)的功能。一般說(shuō)來(lái)，最常用的功能無(wú)非是對(duì)地圖的縮放、移動(dòng)、按地名查詢和測(cè)量距離等。在這里我們只選取比較簡(jiǎn)單的“放大”、“縮小”、“移動(dòng)”、“復(fù)位”和“測(cè)距”。

　　二、制作地圖的底圖

　　地圖的底圖可以通過(guò)很多的圖形圖像處理軟件來(lái)制作，當(dāng)然也可以用Flash 制作，在這里不做詳解。
　　打開(kāi)Macromedia Flash Professional，導(dǎo)入做好的地圖圖片作為底圖。（本例中使用一個(gè)用Flash Professional制作完成的底圖。）

　　三、制作功能按鈕

　　新建一個(gè)新的圖層，命名為“按鈕”，在該層依次創(chuàng)建“放大”、“縮小”、“移動(dòng)”、“復(fù)位”和“測(cè)距”5個(gè)按鈕。如下圖所示。

點(diǎn)擊看大圖　　圖1 創(chuàng)建基本功能按鈕

四、為按鈕分配AS功能代碼

　　進(jìn)入“動(dòng)作面板”，為各個(gè)按鈕配上以下Actionscript功能控制代碼。

　　1、“放大”的Actionscript代碼如下：

　　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　　　map_mc._xscale *= 1.2; //地圖的 X 軸坐標(biāo)放大20%
　　　　map_mc._yscale *= 1.2; //地圖的 Y 軸坐標(biāo)放大20%
　　}

　　注：其中的_xscalet和_yscale是確定從影片剪輯注冊(cè)點(diǎn)開(kāi)始應(yīng)用的影片剪輯水平及垂直縮放比例 (percentage)。默認(rèn)注冊(cè)點(diǎn)為 (0,0)。同時(shí)調(diào)整這兩個(gè)屬性的值可以達(dá)到改變地圖大小的目的。

　　當(dāng)然，我們還可以使用以下Actionscript代碼：

　　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　　　map_mc._width *= 1.2; //地圖的寬度放大20%
　　　　map_mc._height *= 1.2; //地圖的高度放大20%
　　}

　　注：_width和_height影片剪輯的寬度和高度，單位為像素。

　　2、 “縮小”按鈕的Actionscript代碼如下：

　　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　　　map_mc._xscale *= 0.8; //地圖的 X 軸坐標(biāo)縮小20%
　　　　map_mc._yscale *= 0.8; //地圖的 Y 軸坐標(biāo)縮小20%
　　}

　　或者：

　　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　　　map_mc._width *= 0.8; //地圖的寬度縮小20%
　　　　map_mc._height *= 0.8; //地圖的高度縮小20%
　　}

　　 3、“移動(dòng)”的Actionscript代碼如下：

　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　move(); //調(diào)用move()函數(shù)
　}

　function move() { //定義move()函數(shù)
　　　map_mc.onMouseDown = function () { //當(dāng)鼠標(biāo)左鍵按下時(shí)
　　　startDrag(map_mc); //開(kāi)始拖動(dòng)地圖map_mc
　　　}

　　　map_mc.onMouseUp = function () { //當(dāng)鼠標(biāo)左鍵釋放時(shí)
　　　stopDrag(); //停止拖動(dòng)地圖map_mc
　　　}

　 } //結(jié)束move()函數(shù)的定義

　　注：此處所調(diào)用的全局函數(shù)startDrag可以使影片剪輯在影片播放過(guò)程中拖動(dòng)。一次只能拖動(dòng)一個(gè)影片剪輯。執(zhí)行 startDrag() 操作后，影片剪輯將保持可拖動(dòng)狀態(tài)，直到用 stopDrag() 顯式停止拖動(dòng)為止，或直到對(duì)其它影片剪輯調(diào)用了 startDrag() 動(dòng)作為止。

　　 4、“復(fù)位”按鈕的功能是將地圖恢復(fù)到文件開(kāi)啟時(shí)的初始狀態(tài)，其Actionscript代碼如下：

　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　map_mc._xscale = 100; //將地圖map_mc的X軸縮放比率還原至原始大小
　　map_mc._yscale = 100; //將地圖map_mc的Y軸縮放比率還原至原始大小
　　map_mc._x = 200; //將地圖map_mc的注冊(cè)點(diǎn)X坐標(biāo)還原至中心點(diǎn)
　　map_mc._y = 150; //將地圖map_mc的注冊(cè)點(diǎn)Y坐標(biāo)還原至中心點(diǎn)
　 }

　　注：縮放本地坐標(biāo)系統(tǒng)將影響 _x 和 _y 屬性設(shè)置，這些設(shè)置是以整像素定義的。

　　 5、“測(cè)距”按鈕的功能是測(cè)量地圖上某兩點(diǎn)間的距離，其Actionscript代碼如下：

　on (release) { //當(dāng)鼠標(biāo)釋放時(shí)執(zhí)行以下動(dòng)作
　　measure (); //調(diào)用measure ()測(cè)距函數(shù)
　}

　function measure (){ //定義measure ()函數(shù)
　　this.createEmptyMovieClip("canvas_mc", this.getNextHighestDepth());
　　 //創(chuàng)建名為“canvas_mc”的影片剪輯
　　var mouseListener:Object = new Object();//建立一個(gè)mouseListener偵聽(tīng)器對(duì)象
　　mouseListener.onMouseDown = function() { //當(dāng)鼠標(biāo)左鍵按下時(shí)
　　 this.isDrawing = true; //開(kāi)始畫(huà)線
　　 this.orig_x = _xmouse; //記錄此時(shí)的鼠標(biāo)指針的X坐標(biāo)
　　 this.orig_y = _ymouse; //記錄此時(shí)的鼠標(biāo)指針的Y坐標(biāo)
　　 this.target_mc = canvas_mc.createEmptyMovieClip("", canvas_mc.getNextHighestDepth());
　 }

　　mouseListener.onMouseMove = function() { //當(dāng)鼠標(biāo)移動(dòng)時(shí)
　　 if (this.isDrawing) { //當(dāng)開(kāi)始畫(huà)線時(shí)
　　　 this.target_mc.clear(); //清除上一次所畫(huà)的線條
　　　 this.target_mc.lineStyle(1, 0xFF0000, 100); //設(shè)定線條的式樣
　　　 this.target_mc.moveTo(this.orig_x, this.orig_y); //設(shè)定所畫(huà)線條的起點(diǎn)
　　　 this.target_mc.lineTo(_xmouse, _ymouse); //設(shè)定所畫(huà)線條的終點(diǎn)
　　 }
　　 updateAfterEvent();
　　}

　　mouseListener.onMouseUp = function() { //當(dāng)鼠標(biāo)左鍵釋放時(shí)
　　　line_width=_xmouse-this.orig_x; //畫(huà)線終點(diǎn)與原點(diǎn)X軸坐標(biāo)的距離
　　　line_height=_ymouse-this.orig_y; //畫(huà)線終點(diǎn)與原點(diǎn)Y軸坐標(biāo)的距離
　　　this.isDrawing = false; //停止畫(huà)線
　　　var l:Number = Math.sqrt(Math.pow(line_width, 2)+Math.pow(line_height, 2))*2500/map_mc._xscale; 　//計(jì)算出線條的長(zhǎng)度，并換算成實(shí)際長(zhǎng)度
　　line_mc.createTextField("length"+nextDepth+"_txt",canvas_mc.getNextHighestDepth(),(this.orig_x+_xmouse)/2-10, this.orig_y+_ymouse)/2-20, 1, 1); //創(chuàng)建文本框，以顯示所測(cè)量的長(zhǎng)度結(jié)果
　　line_mc['length'+nextDepth+'_txt'].text = Math.round(l); //顯示測(cè)量結(jié)果

　　}

　};
　　Mouse.addListener(mouseListener);
}

　　注： createEmptyMovieClip方法是創(chuàng)建一個(gè)空影片剪輯作為現(xiàn)有影片剪輯的子級(jí)；
　　 Math.sqrt 方法是計(jì)算并返回指定數(shù)字的平方根。
　　 Math.round 方法是將參數(shù)的值向上或向下舍入為最接近的整數(shù)并返回該值。
　　 Math.pow (x:Number, y:Number)方法是計(jì)算并返回 x 的 y 次冪。
　　通過(guò)以上3種方法，運(yùn)用三角形的勾股定理?yè)Q算出測(cè)量長(zhǎng)度。

五、標(biāo)注地名　　再加上地名標(biāo)注就構(gòu)成了一個(gè)最基本的電子地圖框架，效果如下。

圖2 最簡(jiǎn)單的Flash電子地圖
點(diǎn)擊左邊五個(gè)功能按鈕可以得到相應(yīng)功能
測(cè)距時(shí)用鼠標(biāo)在地圖中需要測(cè)距的起點(diǎn)單擊按住拖動(dòng)到終點(diǎn)松開(kāi)即可

　　如果只是一個(gè)小區(qū)或是小城市的地圖，比如九江電子地圖，直接在新建圖層上注標(biāo)地名即可，但如果是要制作類似網(wǎng)格深圳、中國(guó)電子地圖網(wǎng)等大型城市的地圖，其標(biāo)注內(nèi)容太多，而且需要經(jīng)常更新，就不適合在Flash內(nèi)標(biāo)注，而要調(diào)用外部數(shù)據(jù)庫(kù)來(lái)完成。(責(zé)編：waye)