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

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

赞 (0)

相关推荐

  • javascript使用百度地图api和html5特性获取浏览器位置

    复制代码 代码如下: <!DOCTYPE html><html><body><p id="demo">点击这个按钮,获得您的位置:</p><button onclick="getLocation()">试一下</button><script src="http://api.map.baidu.com/api?v=1.4" type="text/ja

  • javascript实现百度地图鼠标滑动事件显示、隐藏

    其实现思路是给label设置样式,我们来看下具体做法吧 var label = new BMap.Label("我是文字标注哦",{offset:new BMap.Size(20,-10)}); label.setStyle({ display:"none" //给label设置样式,任意的CSS都是可以的 }); marker.setLabel(label); marker.addEventListener("mouseover", funct

  • js 调用百度地图api并在地图上进行打点添加标注

    js 调用百度地图api并在地图上进行打点添加标注

    最近要做一个网页,具体内容是:上边有一个标题,下边分成两块,左边是地图.并且地图上有两个点,点击两个点有相应的提示信息,显示数据库里最新的两条数据信息.右边是一些文字说明.本人刚开始学习,做的也不是很好 总体效果如下所示: 首先新建map.php文件,代码如下 复制代码 代码如下: <!DOCTYPE html> <?php /* 创建与数据库的连接 */ $conn=mysql_connect("","","") or die

  • JS中引用百度地图并将百度地图的logo和信息去掉

    采用CSS覆盖的方法就可以了,但是官方是不允许这么做的,参考:http://developer.baidu.com/map/question.htm 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>javascript移除百度地图LOGO和版权信息</title> <script type="text/j

  • 百度地图api应用标注地理位置信息(js版)

    百度地图api应用标注地理位置信息(js版)

    有时做了一些东西没有记录,而过一段时间再看的时候,有会忘记了.需要在重新在看一遍. 百度地图javascript api可以参考 http://developer.baidu.com/map/reference/  示例:http://developer.baidu.com/map/jsdemo.htm 更多百度地图的介绍http://www.cnblogs.com/milkmap/tag/%E5%9C%B0%E5%9B%BEAPI/   里面介绍的非常详细. 弄了一个百度地图来标注地理位置信息

  • 通过百度地图获取公交线路的站点坐标的js代码

    最近做百度地图的模拟数据,需要获取某条公交线路沿途站点的坐标信息,貌似百度没有现成的API,因此做了一个模拟页面,工具而已,IE6/7/8不支持 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>获取公交站点坐标</title> <style type="text/css"> html,b

  • 利用百度地图JSAPI生成h7n9禽流感分布图实现代码

    利用百度地图JSAPI生成h7n9禽流感分布图实现代码

    下图为使用百度地图JSAPI生成的H7N9感染分布图示例,其中的数据来自新华网(4.8号),截图如下: 使用的功能列表如下: 1.自定义版权控件功能,即(1)对应的数据来源部分,代码如下: 复制代码 代码如下: var cr = new BMap.CopyrightControl({anchor: BMAP_ANCHOR_TOP_RIGHT}); map.addControl(cr); //添加版权控件 var bs = map.getBounds(); cr.addCopyright({id:

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

    百度三维地图的js数据格式:mapData["sign"] ["5,158,141"]={"busStation":{"4,317,282": [{"id":"ff8080811c462eb7011d2e23d5b91083","name":"地安门站","y":579152,"x":650606}, {&q

  • jsp页面数据分页模仿百度分页效果(实例讲解)

    废话不多说,直接上代码 请根据自己的项目.包名修改 <%@page import="web09.shop.DBUtil"%> <%@page import="java.sql.ResultSet"%> <%@page import="java.sql.PreparedStatement"%> <%@page import="java.sql.Connection"%> <%

  • 利用python和百度地图API实现数据地图标注的方法

    如题,先上效果图: 主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一.使用python语句,通过百度地图API,获取经纬度读取文件信息 import pandas as pd data = pd.read_excel('test_baidu.xlsx') data 图中可以看出,原始数据并没有经纬度. 2. 构建抓取经纬度函数 import json from urllib.request i

  • 使用Ajax模仿百度搜索框的自动提示功能实例

    啊啊,熬夜了.今天学习了ajax给我的感觉就是,"哇塞"ajax好酷炫哦,(额...后端狗,接触到了大前端的魅力了),这么晚了还是直奔主题把.Let's go! 百度搜索提示框,我想大家都很熟悉了把,是什么样子我也就不再赘述.直接看代码 来我们写一个简陋的jsp页面 Look! 是这个样子的 下面是代码: <%@ page language="java" contentType="text/html; charset=UTF-8" page

  • AngularJS与BootStrap模仿百度分页的示例代码

    AngularJS与BootStrap模仿百度分页的示例代码

    模仿百度的每页显示10条数据, 实现了当前页居中的算法. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BootStrap+AngularJS分页显示 </title> <script type="text/javascript" src="../js/jquery.js"></scr

  • js微信分享API

    本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.

  • 解决vue.js 数据渲染成功仍报错的问题

    最近在做一个vue项目,用的是官方推荐的axios请求数据,数据结构是一级对象嵌套二级对象,发现一级对象数据渲染不报错,二级数据渲染报错.很是郁闷!data函数如下 export default { name: 'hello', data() { return { card:{} } } } 返回的数据如下: { "object":{ "subObject":"123", ... } } 报错的原因是在data函数return的card里没有二级

  • JS数据双向绑定原理与用法实例分析

    JS数据双向绑定原理与用法实例分析

    本文实例讲述了JS数据双向绑定原理与用法.分享给大家供大家参考,具体如下: 通常在前端开发过程中,经常遇到需要绑定两个甚至多个元素之间的值,比如将input的值绑定到一个h1上,改变input的值,h1的文字也自动更新. <h1 id="title">Hello</h1> <input type="text" id="a" /> 首先是在界面上更改input的值,需要监听input的"input&qu

  • js数据类型转换与流程控制操作实例分析

    本文实例讲述了js数据类型转换与流程控制操作.分享给大家供大家参考,具体如下: 数据类型转换: //number转换成str // var str=a+''; // console.log(str); // console.log(typeof str); //转换成字符串了 var str2=a.toString(); //强制转换成 string console.log(typeof str2); //str转换成 number var stringNum='789'; var num2=N

  • Angular JS数据的双向绑定详解及实例

    Angular JS数据的双向绑定 接触AngularJS许了,时常问自己一些问题,如果是我实现它,会在哪些方面选择跟它相同的道路,哪些方面不同.为此,记录了一些思考,给自己回顾,也供他人参考. 初步大致有以下几个方面: 数据双向绑定 视图模型的继承关系 模块和依赖注入的设计 待定 数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controller="Count

随机推荐