模仿百度三维地图的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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
jquery实现的用户注册表单提示操作效果代码分享
Aug 28 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
关于vuex的学习实践笔记
Apr 05 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
JavaScript中的 new 命令
May 22 Javascript
js前端设计模式优化50%表单校验代码示例
Jun 21 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下载远程文件到本地存储的方法
2015/03/24 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
jQuery ajax应用总结
2016/06/02 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
2017/03/09 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
Vue使用screenfull实现全屏效果
2020/09/17 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
Python日志模块logging简介
2015/04/13 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
python中uuid模块实例浅析
2020/12/29 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
2017/03/13 HTML / CSS
End Clothing美国站:英国男士潮牌商城
2018/04/20 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
求职简历自我评价怎么写
2015/03/10 职场文书
教师节寄语2015
2015/03/23 职场文书
繁星春水读书笔记
2015/06/30 职场文书
运动会运动员赞词
2015/07/22 职场文书
高中美术教学反思
2016/02/17 职场文书
解决go在函数退出后子协程的退出问题
2021/04/30 Golang
浅谈Python数学建模之固定费用问题
2021/06/23 Python
《巫师》是美食游戏?CDPR10月将推出《巫师》官方食谱
2022/04/03 其他游戏
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android