模仿百度三维地图的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日期、星座的级联显示代码
Jan 23 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
详解基于angular-cli配置代理解决跨域请求问题
Jul 05 Javascript
js中el表达式的使用和非空判断方法
Mar 28 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
Apr 09 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
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery对象[0]是什么含义?
2010/07/31 Javascript
Extjs中使用extend(js继承) 的代码
2012/03/15 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
GRID拖拽行的实例代码
2013/07/18 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
jquery实现选中单选按钮下拉伸缩效果
2015/08/06 Javascript
jQuery控制div实现随滚动条滚动效果
2016/06/07 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
Python Tkinter简单布局实例教程
2014/09/03 Python
python内存管理分析
2015/04/08 Python
答题辅助python代码实现
2018/01/16 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
详解python中的hashlib模块的使用
2019/04/22 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
英国排名第一的停车场运营商:NCP
2019/08/26 全球购物
PHP面试题及答案二
2015/05/23 面试题
GWT (Google Web Toolkit)有哪些主要的原件组成?
2015/06/08 面试题
十八大报告观后感
2014/01/28 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
承诺书范文
2014/06/03 职场文书
超市理货员岗位职责
2014/07/04 职场文书
五四青年节的活动方案
2014/08/20 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android