模仿百度三维地图的js数据分享


Posted in Javascript onMay 12, 2011

百度三维地图的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数据就和百度上相同了。

Javascript 相关文章推荐
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
JavaScript函数基础详解
Feb 03 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 Javascript
vue实现直播间点赞飘心效果的示例代码
Sep 20 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
javascript数组去掉重复
May 12 #Javascript
javascript 弹出层组件(升级版)
May 12 #Javascript
ExtJS4 组件化编程,动态加载,面向对象,Direct
May 12 #Javascript
关于js获取radio和select的属性并控制的代码
May 12 #Javascript
js 第二代身份证号码的验证机制代码
May 12 #Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 #Javascript
五个jQuery图片画廊插件 推荐
May 12 #Javascript
You might like
PHP类的使用 实例代码讲解
2009/12/28 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
简洁短小的 JavaScript IE 浏览器判定代码
2010/03/21 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
Vuejs第十一篇组件之slot内容分发实例详解
2016/09/09 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
在Vue项目中使用snapshot测试的具体使用
2019/04/16 Javascript
微信小程序bindinput与bindsubmit的区别实例分析
2019/04/17 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
python脚本实现查找webshell的方法
2014/07/31 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
python实现人脸识别代码
2017/11/08 Python
详解python分布式进程
2018/10/08 Python
pycharm使用matplotlib.pyplot不显示图形的解决方法
2018/10/28 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
解决TensorFlow模型恢复报错的问题
2020/02/06 Python
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
经贸日语毕业生自荐信
2013/11/03 职场文书
市场营销专业个人求职信范文
2013/12/14 职场文书
《忆江南》教学反思
2014/04/07 职场文书
小班上学期评语
2014/05/05 职场文书
学习走群众路线心得体会
2014/11/05 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python