模仿百度三维地图的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 相关文章推荐
浅析jQuery的链式调用之each函数
Dec 03 Javascript
js调试工具Console命令详解
Oct 21 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
Vue中保存用户登录状态实例代码
Jun 07 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
Vue+webpack项目基础配置教程
Feb 12 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 Javascript
原生js实现下拉框选择组件
Jan 20 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中使用foreach和引用导致程序BUG的问题介绍
2012/09/05 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
js获取div高度的代码
2008/08/09 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
js数组与字符串的相互转换方法
2014/07/09 Javascript
用javascript关闭本窗口不弹出询问框的方法
2014/09/12 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
2015/04/14 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
使用js获取伪元素的content实例
2017/10/24 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
ligerUI的ligerDialog关闭刷新的方法
2019/09/27 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[01:31:03]DOTA2完美盛典全回顾 见证十五项大奖花落谁家
2017/11/28 DOTA
在Python的循环体中使用else语句的方法
2015/03/30 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
如何理解python面向对象编程
2020/06/01 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
试用期自我鉴定范文
2014/03/20 职场文书
保护环境建议书作文400字
2015/09/14 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
Django框架中模型的用法
2022/06/10 Python