baiduMap试手《办理进京证和市区警察查询进京证的地址浏览》
2024-05-09 15:30:00
没用过baidu的map api其实挺简单，申请一个key，然后根据坐标在地图上生成对象，看了官方的dome多少知道有些什么功能了，没什么可说的直接贴效果。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
6 <title>办理进京证和警察查询进京证的地址</title>
7 <style type="text/css">
8 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,text
9 area,p,blockquote,th,td{padding:0;margin:0;}
10 fieldset,img{border:0;}
11 table{border-collapse:collapse;border-spacing:0;}
12 ol,ul{list-style:none;}
13 address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}
14 caption,th{text-align:left;}
15 h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
16 q:before,q:after{content:'';}
17 abbr,acronym{border:0;}
18 .floatfix{*zoom:1;}
19 .floatfix:after{content:"";display:table;clear:both;}
20
21 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-size: 14px;font-family: Arial, 'Microsoft Yahei';}
22 #menu{width: 100%;color: #fff;background-color: #3189f3;min-width: 1024px;position:absolute;top: 0;left: 0;z-index: 99999;}
23 #menu a{ cursor: pointer; display: block;float:left;color: #fff;text-decoration: none;padding: 15px 30px;}
24 #menu a:hover{color: yellow;}
25 #menu a.active{cursor:default;background-color: #fff;color: #3189f3;}
26 #menu span#auther{float: right;}
27 .infoBox img{display: none;}
28 .popDIv{border-radius:5px;background-color: #3189f3;border:1px solid #3189f3;color:#fff;padding:5px 10px;line-height: 2;}
29 #menu, .popDIv{background-color: rgba(049,137,243,.9);box-shadow: 0px 2px 9px rgba(0,0,0,.4);}
30 </style>
31 </head>
32 <body>
33 <div id="menu" class="floatfix">
34 <a id="oHandle">1.北京办理进京证的地址</a>
35 <a id="aPoliceInquiries" class="active">2.市区警察查询进京证地址</a>
36 <a href="http://www.bjjtgl.gov.cn/publish/portal0/#ess_ctr3705_ModuleContent" target="_blank">3.北京车管办事大厅</a>
37 <span id="auther"><a href="http://www.cnblogs.com/dtdxrk/" target="_blank">Auther:文刀日月</a></span>
38 </div>
39 <div id="allmap"></div>
40
41 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bt9GZhS7EnnDQiB4ngnmtLcU"></script>
42 <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
43 <script type="text/javascript">
44 var aPoliceInquiries = [ //警察查询进京证地址 http://club.autohome.com.cn/bbs/thread-a-100002-27144547-1.html
45 '京开高速进京方向,116.35266,39.852057',
46 '二环建国门主路出入口附近,116.442268,39.91453',
47 '西单路口,116.380434,39.913397',
48 '天安门西,116.39805,39.913776',
49 '天安门东,116.407851,39.91408',
50 '东单路口,116.424552,39.914471',
51 '西直门内大街,116.37524,39.946559',
52 '京通快速辅路高碑店桥下,116.540091,39.915821',
53 '通惠河北路上二环入口,116.454897,39.909599',
54 '安定门南桥头,116.4145,39.954834',
55 '京承高速四环三环入口处,116.438387,39.977978',
56 '菜户营桥南向北方向,116.354604,39.870749',
57 '京开辅路西红门桥下,116.355018,39.7957 ',
58 '西红门收费或者上四环匝道口,116.354965,39.835659',
59 '亦庄荣华路进五环桥下,116.498747,39.820475',
60 '平房桥体育中心门口,116.536293,39.947769',
61 '莲石路上西五环,116.222301,39.902103',
62 '机场第二高速五环出口,116.546438,39.950245',
63 '京藏高速上五环处,116.363037,40.027934',
64 '北京站,116.433617,39.910981',
65 '四通桥下掉头处,116.331692,39.973024',
66 '马甸桥北向南右转,116.387178,39.975061',
67 '开阳桥南向北,116.380971,39.876118',
68 '榴乡桥五环上四环,116.42944,39.838388',
69 '京藏高速上四环处匝道,116.383384,39.998156',
70 '东四十条桥东向西方向,116.440696,39.939167',
71 '机场高速上北二环入口,116.444609,39.955271',
72 '苏州桥(下),116.314656,39.967154',
73 '德胜门城楼西侧三岔口处,116.38728,39.954026',
74 '文津街,116.397394,39.928365',
75 '南礼士路,116.359221,39.912979',
76 '西四南北大街,116.37991,39.930007',
77 '八宝山地铁十字路口,116.242277,39.913185',
78 '东五环七颗树桥拐弯处,116.535686,39.965046',
79 '万泉河由北向南下来进四环左拐处,116.307151,39.991264',
80 '联想桥自东向西掉头到大钟寺中坤广场的桥下面,116.350438,39.973238',
81 '京承高速往三元桥方向过了红绿灯拐向三环辅路,116.463623,39.966406',
82 '南坞桥下调头,116.281159,39.971384',
83 '北坞村玉泉山路口,116.257024,39.995212',
84 '闵庄路口,116.226545,39.9788',
85 '五环上阜石路,116.223187,39.930233',
86 '西二环复兴门桥南向北,116.363055,39.910284',
87 '西直门北大街北向南进入西二环路口处(对着北京北站东边的位置),116.362948,39.949733',
88 '五环主路香泉环岛,116.228847,39.998266'
89 ],
90
91 oHandle = [ //北京办理进京证的地址
92 '110国道张山营办证处 地址：110国道旧线92.6公里处 电话：,115.852481,40.484011',
93 '白河堡综合检查站 地址：110新线90公里 电话：60152037,116.171893,40.660274',
94 '西康综合检查站 地址：西官路0.1公里 电话：61161538,115.879619,40.365362',
95 '101国道松树峪办证处 地址：京承公路(101国道)103公里 电话：69036473,117.156398,40.570334',
96 '平蓟路上堡子综合检查站 地址：平蓟路(314市道)15.9公里 电话：69991279,117.376483,40.185031',
97 '111国道汤河口综合检查站 地址：111国道(怀丰路)108公里 电话：89671245,116.646638,40.738908',
98 '京平高速夏各庄办证处 地址：京平高速67公里 电话：,117.103758,40.097602',
99 '104国道凤河营办证处 地址：104国道45公里 电话：80202567,116.699392,39.617721',
100 '106国道榆垡办证处 地址：106国道38公里 电话：89213399,116.331426,39.515485',
101 '109国道芹峪口综合检查站 地址：109国道59.4公里 电话：61830183,115.882569,40.044341',
102 '京藏高速康庄综合检查站 地址：京藏高速进京68公里 电话：61164794,115.901425,40.363782',
103 '京津高速永乐店办证处 地址：京津高速32.5公里 电话：,116.798409,39.666158',
104 '通燕高速白庙综合检查站 地址：通燕高速30公里 电话：69591239,116.774481,39.943303',
105 '京津公路觅子店综合检查站 地址：京津公路49公里觅子店路口 电话：80566010,116.887068,39.728594',
106 '房易路长沟综合检查站 地址：房易路10公里处 电话：88313908,115.912086,39.600384',
107 '108国道红煤厂办证处 地址：108国道60公里处 电话：60365374,115.858684,39.828345',
108 '107国道琉璃河综合检查站 地址：107国道45公里处 电话：89381242,116.02324,39.598619',
109 '京港澳高速窦店服务区办证处 地址：京港澳高速38公里处 电话：80318661,116.085348,39.635776',
110 '京哈高速白鹿办证处 地址：京哈高速进京7公里 电话：88313459,116.585803,39.874494',
111 '京沪高速应寺综合检查站 地址：京沪高速进京31.6公里 电话：80525400,116.585803,39.874494'
112 ]
113
114
115 // 百度地图API功能
116 var map = new BMap.Map("allmap"); // 创建Map实例
117 var point = new BMap.Point(116.404, 39.915); // 创建点坐标
118 map.enableScrollWheelZoom(); //启用滚轮放大缩小
119 map.addControl(new BMap.NavigationControl({"offset":{"width":20,"height":60}})); //添加默认缩放平移控件
120
121 var $ = function(id){ return document.getElementById(id)},
122 _temp,title,x,y,
123 marker,pot,infoBox=[];
124
125 function strTab(arr){
126 (arr==oHandle) ? map.centerAndZoom(new BMap.Point(116.408878,40.068823),9) : map.centerAndZoom(point,12); // 初始化地图,设置中心点坐标和地图级别。
127 map.clearOverlays();
128 for(var i in arr){
129 _temp = arr[i].split(',');
130 title = (arr==oHandle)? _temp[0].split(' ') :_temp[0];
131 //console.log(title)
132 x = _temp[1];
133 y = _temp[2];
134 pot = new BMap.Point(x, y);
135 marker = new BMap.Marker(pot);
136 marker.index = i;
137 if(arr==oHandle) title = title[0]+'<br>'+title[1]+'<br>'+title[2];
138 infoBox[i] = new BMapLib.InfoBox(map,'<div class=popDIv>'+title+'</div>',{
139 offset: {
140 height:5
141 },
142 boxStyle:{
143 width: "250px",
144 },
145 enableAutoPan: true,
146 align: INFOBOX_AT_TOP
147 });
148 map.addOverlay(marker);
149 infoBox[i].open(marker);
150 infoBox[i].hide();
151
152 marker.addEventListener("mouseover", function(){
153 infoBox[this.index].open(this);
154 });
155 marker.addEventListener("mouseout", function(){
156 infoBox[this.index].hide();
157 });
158 }
159 }
160
161 strTab(aPoliceInquiries);
162
163 $("aPoliceInquiries").onclick = function(){
164 this.className = "active";
165 $("oHandle").className = "";
166 strTab(aPoliceInquiries);
167 }
168
169 $("oHandle").onclick = function(){
170 this.className = "active";
171 $("aPoliceInquiries").className = "";
172 strTab(oHandle);
173 }
174
175 </script>
176 </body>
177 </html>baiduMap试手《办理进京证和市区警察查询进京证的地址浏览》相关推荐
- 微信聊天记录能恢复吗？值得试手的2个方法推荐
很多微信用户在使用微信的过程中都没有备份数据的习惯,一旦将聊天记录删除,就会认为没有机会恢复回来,事实是这样的吗?当然不是啦!微信聊天记录能恢复吗?小编推荐2个值得试手的方法,让您在没有备份的情况下也 ...
- 城市区号查询 API数据接口
城市区号查询 计费模式 免费额度 点数单价 每日限制 会员免费 100次 免费 1000次 更新时间:2022-07-11 02:59:37接口状态:正常 根据城市名称 返回对应区号 或者 根据区号 ...
- Python机器学习：PCA与梯度上升：007试手MNIST数据集
数据集加载,本来想使用sklearn中的 fetch_openml函数直接从网站下载数据集,然而现在这条命令不行(似乎是网站问题),因此,尝试用使用本地加载首先在 链接:https://pan.bai ...
- 【Java自顶向下】试手小公司，面试官问我ConcurrentHashMap，我微微一笑……
文章目录 ConcurrentHashMap 一.ConcurrentHashMap初始化的剖析 1.1 ConcurrentHashMap初始化 1.2 理解sizeCtl 二.JDK8的添加安全 ...
- jqMobi + Android 试手
忙活的一个晚上,搞定了一个界面,主要在滚动条和风格上花了不少时间,jqMobi的文档真的少的可怜,希望文档可以多点,以下是几份参考资料: 最新的Api参考:http://www.shareach.co ...
- Fragment试手
(1)android.app.Fragment:兼容的最低版本是android:minSdkVersion="11" 因此你的应用不能兼容3.0以下的应用. 可以使用<fra ...
- 开发者测试android studio 试手
本篇文章个人在北京喝咖啡的时候突然想到的...今天就有想写几篇关于开发者测试的文章,所以回家到之后就奋笔疾书的写出来宣布了 Google I/O 2013大会在北京时间2013年5月16日凌晨0点拉开 ...
- java随机抽题系统_2020税务师机考模拟系统全新上线，智能题库 随机组卷，快来试手...
2020年税务师考试实行闭卷机考,提升机考答题能力很有必要.提前练习.熟悉机考系统,可以加快答题速度,多出来的时间,可以去思考题目或者多检查一遍,都好过把时间浪费在打字慢.计算器不习惯.公式输入不熟练 ...
- 反汇编入门试手 简单程序
刚学汇编,第一次自己写博客,分享一下,人艰不拆哈~ 老师为了提高我们的学习兴趣,给了我们这些刚懂寄存器是什么的菜鸟一个简单的exe文件让我们进行反汇编破解出正确的中断输入 也不懂什么反汇编工具,仅在d ...
最新文章
- Maya摄像机动画技能学习教程
- SqlServer2005数据库分区
- rac_安装软件时报版本号过高问题
- 一款jquery实现的整屏切换特效
- 完美解决idea继承maven后,构建项目慢的问题
- Python代码加密混淆
- [No0000142]Outlook通过添加签名 自动添加邮件模板
- 第六章：系统困境之 你的努力与时代进程相逆
- java发送c语言结构体_C语言中结构体直接赋值？
- HDFS的命令行使用【常用 hdfs 命令】
- 微信小程序快手小店登录
- Response.AddHeader 参数
- 新浪微博技术分享：微博短视频服务的优化实践之路
- html radio vue,Vue.js选中动态绑定的radio的指定项_心病_前端开发者
- 源码看JAVA【五】Byte
- 微信公众号开发一：接入指南
- 【LC中等】1321. 餐馆营业额变化增长
- adb install 命令参数
- SideBar实现微信通讯录
- matlab对信号的滤波方法