DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 模仿百度三維地圖的js數據分享
模仿百度三維地圖的js數據分享
編輯:關於JavaScript     
百度三維地圖的js數據格式:mapData["sign"] ["5,158,141"]={"busStation":{"4,317,282": [{"id":"ff8080811c462eb7011d2e23d5b91083","name":"地安門站","y":579152,"x":650606}, {"id":"ff8080811c462eb7011d2e2414f31085","name":"地安門站","y":579176,"x":650750}],"4,316,283": [{"id":"ff8080811c462eb7011d2cc3d5630ef3","name":"白士站","y":580232,"x":648834}]}}

我們進行模仿,首先了解下作為關聯數組的對象的概念:
var o = new Object();
o.x="Hello!";
上面我們定義了一個對象,對象的一個屬性是x,這樣的形式是我們常見的。JavaScript中的對象可以作為關聯數組使用,因為它們能夠將任意的數據值和任意的字符串關聯起來。如果采用這種方式使用對象,那麼要訪問的對象就要采用不同的語法,即使用一個由方括號封閉起來的、包含所需屬性名的字符串,使用這種語法我們可以將上面的o對象的x屬性進行如下賦值:
var o = new Object();
o["x"]="Hello!"
這種方式在某些情況下是必要的,例如在你不知道屬性名的情況下,就不能使用"."來存取對象的屬性,但是可以使用運算符[]來命名屬性,因為它的屬性名是一個字符串值(該值是動態的,在運行時可以改變),而不是一個標識符(它是靜態的,在程序中必須進行硬編碼)。如果使用一個對象時采用的是這種方式,我們稱它為關聯數組。(詳細參見《JavaScript權威指南(第四版)》(155頁))
通過上面的描述,我們可以這樣來定義一個對象:

(1)<script type="text/javascript">
var o = new Object();
var x =MapData[2];
var y = MapData[3];
o[x] = new Object();
o[x][y] = {"id":MapData[0],"icolor":MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]};
//o[x][y]={"busStation":{"4,315,283": [{"id":"ff8080811c462eb7011d238c49a00b35","name":"西板橋公交站","y":580326,"x":646206}, //{"id":"ff8080811c462eb7011d238dc5980b38","name":"西板橋公交站","y":580686,"x":645310}, //{"id":"ff8080811c462eb7011d2391ac470b3f","name":"故宮公交車站","y":581454,"x":645606}, //{"id":"ff8080811c462eb7011d2392aea60b44","name":"故宮公交站","y":581470,"x":645690}]}};
alert(o[x][y]["id"]);
</script>
(2)我們還可以將對象的形式寫成如下所示:

<script type="text/javascript">
var d ={"x":{"y":{'id':MapData[0],'icolor':MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]}},"x1":{"y1":{"id":MapData[8],"icolor":MapData[1],"x":MapData[2],"y":MapData[3],"coordinate":MapData[4],"type":MapData[5],"attribute":MapData[6]}}}
alert(d["x"]["y"]["icolor"]);
</script>

至此,我們的js數據就和百度上相同了。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved