模仿百度三维地图的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 相关文章推荐
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
常见的jQuery选择器汇总
Nov 24 Javascript
jQuery中filter()方法用法实例
Jan 06 Javascript
JS动态修改iframe高度和宽度的方法
Apr 01 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
学习Angular中作用域需要注意的坑
Aug 17 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 Javascript
vue-devtools的安装步骤
Apr 23 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
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 UTF8 文件的签名问题
2009/10/30 PHP
php下foreach提示Warning:Invalid argument supplied for foreach()的解决方法
2014/11/11 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
PHP实现Google plus的好友拖拽分组效果
2016/10/21 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
Laravel find in set排序实例
2019/10/09 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
js中的触发事件对象event.srcElement与event.target详解
2017/03/15 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python for循环remove同一个list过程解析
2019/08/14 Python
基于python的列表list和集合set操作
2019/11/24 Python
使用Python实现批量ping操作方法
2020/05/06 Python
CSS3 简写animation
2012/05/10 HTML / CSS
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
事业单位个人应聘自荐信
2013/09/21 职场文书
物流专业大学生的自我鉴定
2013/11/13 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
工商局所长四风自我剖析及整改措施
2014/10/26 职场文书
党小组意见范文
2015/06/08 职场文书
Python办公自动化之Excel(中)
2021/05/24 Python
Pandas自定义选项option设置
2021/07/25 Python
原生JS实现分页
2022/04/19 Javascript