没用过baidu的map api其实挺简单，申请一个key，然后根据坐标在地图上生成对象，看了官方的dome多少知道有些什么功能了，没什么可说的直接贴效果。

 <!DOCTYPE html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

 <title>办理进京证和警察查询进京证的地址</title>

 <style type="text/css">

 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,text

 area,p,blockquote,th,td{padding:0;margin:0;}

 fieldset,img{border:0;}

 table{border-collapse:collapse;border-spacing:0;}

 ol,ul{list-style:none;}

 address,caption,cite,code,dfn,em,strong,th,var{font-weight:normal;font-style:normal;}

 caption,th{text-align:left;}

 h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}

 q:before,q:after{content:'';}

 abbr,acronym{border:0;}

 .floatfix{*zoom:1;}

 .floatfix:after{content:"";display:table;clear:both;}

 body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-size: 14px;font-family: Arial, 'Microsoft Yahei';}

 #menu{width: 100%;color: #fff;background-color: #3189f3;min-width: 1024px;position:absolute;top: 0;left: 0;z-index: 99999;}

 #menu a{ cursor: pointer; display: block;float:left;color: #fff;text-decoration: none;padding: 15px 30px;}

 #menu a:hover{color: yellow;}

 #menu a.active{cursor:default;background-color: #fff;color: #3189f3;}

 #menu span#auther{float: right;}

 .infoBox img{display: none;}

 .popDIv{border-radius:5px;background-color: #3189f3;border:1px solid #3189f3;color:#fff;padding:5px 10px;line-height: 2;}

 #menu, .popDIv{background-color: rgba(049,137,243,.9);box-shadow: 0px 2px 9px rgba(0,0,0,.4);}

 </style>

 </head>

 <body>

 <div id="menu" class="floatfix">

     <a id="oHandle">1.北京办理进京证的地址</a>

     <a id="aPoliceInquiries" class="active">2.市区警察查询进京证地址</a>

     <a href="http://www.bjjtgl.gov.cn/publish/portal0/#ess_ctr3705_ModuleContent" target="_blank">3.北京车管办事大厅</a>

     <span id="auther"><a href="http://www.cnblogs.com/dtdxrk/" target="_blank">Auther:文刀日月</a></span>

 </div>

 <div id="allmap"></div>

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bt9GZhS7EnnDQiB4ngnmtLcU"></script>

 <script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>

 <script type="text/javascript">

 var aPoliceInquiries = [    //警察查询进京证地址 http://club.autohome.com.cn/bbs/thread-a-100002-27144547-1.html

         '京开高速进京方向,116.35266,39.852057',

         '二环建国门主路出入口附近,116.442268,39.91453',

         '西单路口,116.380434,39.913397',

         '天安门西,116.39805,39.913776',

         '天安门东,116.407851,39.91408',

         '东单路口,116.424552,39.914471',

         '西直门内大街,116.37524,39.946559',

         '京通快速辅路高碑店桥下,116.540091,39.915821',

         '通惠河北路上二环入口,116.454897,39.909599',

         '安定门南桥头,116.4145,39.954834',

         '京承高速四环三环入口处,116.438387,39.977978',

         '菜户营桥南向北方向,116.354604,39.870749',

         '京开辅路西红门桥下,116.355018,39.7957 ',

         '西红门收费或者上四环匝道口,116.354965,39.835659',

         '亦庄荣华路进五环桥下,116.498747,39.820475',

         '平房桥体育中心门口,116.536293,39.947769',

         '莲石路上西五环,116.222301,39.902103',

         '机场第二高速五环出口,116.546438,39.950245',

         '京藏高速上五环处,116.363037,40.027934',

         '北京站,116.433617,39.910981',

         '四通桥下掉头处,116.331692,39.973024',

         '马甸桥北向南右转,116.387178,39.975061',

         '开阳桥南向北,116.380971,39.876118',

         '榴乡桥五环上四环,116.42944,39.838388',

         '京藏高速上四环处匝道,116.383384,39.998156',

         '东四十条桥东向西方向,116.440696,39.939167',

         '机场高速上北二环入口,116.444609,39.955271',

         '苏州桥(下),116.314656,39.967154',

         '德胜门城楼西侧三岔口处,116.38728,39.954026',

         '文津街,116.397394,39.928365',

         '南礼士路,116.359221,39.912979',

         '西四南北大街,116.37991,39.930007',

         '八宝山地铁十字路口,116.242277,39.913185',

         '东五环七颗树桥拐弯处,116.535686,39.965046',

         '万泉河由北向南下来进四环左拐处,116.307151,39.991264',

         '联想桥自东向西掉头到大钟寺中坤广场的桥下面,116.350438,39.973238',

         '京承高速往三元桥方向过了红绿灯拐向三环辅路,116.463623,39.966406',

         '南坞桥下调头,116.281159,39.971384',

         '北坞村玉泉山路口,116.257024,39.995212',

         '闵庄路口,116.226545,39.9788',

         '五环上阜石路,116.223187,39.930233',

         '西二环复兴门桥南向北,116.363055,39.910284',

         '西直门北大街北向南进入西二环路口处(对着北京北站东边的位置),116.362948,39.949733',

         '五环主路香泉环岛,116.228847,39.998266'

 ],

 oHandle = [    //北京办理进京证的地址

     '110国道张山营办证处 地址：110国道旧线92.6公里处 电话：,115.852481,40.484011',

 　　'白河堡综合检查站 地址：110新线90公里 电话：60152037,116.171893,40.660274',

 　　'西康综合检查站 地址：西官路0.1公里 电话：61161538,115.879619,40.365362',

 　　'101国道松树峪办证处 地址：京承公路(101国道)103公里 电话：69036473,117.156398,40.570334',

 　　'平蓟路上堡子综合检查站 地址：平蓟路(314市道)15.9公里 电话：69991279,117.376483,40.185031',

 　　'111国道汤河口综合检查站 地址：111国道(怀丰路)108公里 电话：89671245,116.646638,40.738908',

 　　'京平高速夏各庄办证处 地址：京平高速67公里 电话：,117.103758,40.097602',

 　　'104国道凤河营办证处 地址：104国道45公里 电话：80202567,116.699392,39.617721',

 　　'106国道榆垡办证处 地址：106国道38公里 电话：89213399,116.331426,39.515485',

 　　'109国道芹峪口综合检查站 地址：109国道59.4公里 电话：61830183,115.882569,40.044341',

 　　'京藏高速康庄综合检查站 地址：京藏高速进京68公里 电话：61164794,115.901425,40.363782',

 　　'京津高速永乐店办证处 地址：京津高速32.5公里 电话：,116.798409,39.666158',

 　　'通燕高速白庙综合检查站 地址：通燕高速30公里 电话：69591239,116.774481,39.943303',

 　　'京津公路觅子店综合检查站 地址：京津公路49公里觅子店路口 电话：80566010,116.887068,39.728594',

 　　'房易路长沟综合检查站 地址：房易路10公里处 电话：88313908,115.912086,39.600384',

 　　'108国道红煤厂办证处 地址：108国道60公里处 电话：60365374,115.858684,39.828345',

 　　'107国道琉璃河综合检查站 地址：107国道45公里处 电话：89381242,116.02324,39.598619',

 　　'京港澳高速窦店服务区办证处 地址：京港澳高速38公里处 电话：80318661,116.085348,39.635776',

 　　'京哈高速白鹿办证处 地址：京哈高速进京7公里 电话：88313459,116.585803,39.874494',

 　　'京沪高速应寺综合检查站 地址：京沪高速进京31.6公里 电话：80525400,116.585803,39.874494'

 ]    

 // 百度地图API功能

 var map = new BMap.Map("allmap");            // 创建Map实例

 var point = new BMap.Point(116.404, 39.915);    // 创建点坐标

 map.enableScrollWheelZoom();                            //启用滚轮放大缩小

 map.addControl(new BMap.NavigationControl({"offset":{"width":20,"height":60}}));  //添加默认缩放平移控件

 var $ = function(id){ return document.getElementById(id)},

     _temp,title,x,y,

     marker,pot,infoBox=[];

 function strTab(arr){

     (arr==oHandle) ? map.centerAndZoom(new BMap.Point(116.408878,40.068823),9) : map.centerAndZoom(point,12); // 初始化地图,设置中心点坐标和地图级别。

     map.clearOverlays();

     for(var i in arr){

         _temp = arr[i].split(',');

         title = (arr==oHandle)? _temp[0].split(' ') :_temp[0];

         //console.log(title)

         x = _temp[1];

         y = _temp[2];

         pot = new BMap.Point(x, y);

         marker = new BMap.Marker(pot);

         marker.index = i;

         if(arr==oHandle) title = title[0]+'<br>'+title[1]+'<br>'+title[2];

         infoBox[i] = new BMapLib.InfoBox(map,'<div class=popDIv>'+title+'</div>',{

             offset: {

                 height:5

             },

             boxStyle:{

                 width: "250px",

             },

             enableAutoPan: true,

             align: INFOBOX_AT_TOP

         });

         map.addOverlay(marker);

         infoBox[i].open(marker);

         infoBox[i].hide();

         marker.addEventListener("mouseover", function(){

             infoBox[this.index].open(this);

            });

            marker.addEventListener("mouseout", function(){

             infoBox[this.index].hide();

            });

     }

 }

 strTab(aPoliceInquiries);

 $("aPoliceInquiries").onclick = function(){

     this.className = "active";

     $("oHandle").className = "";

     strTab(aPoliceInquiries);

 }

 $("oHandle").onclick = function(){

     this.className = "active";

     $("aPoliceInquiries").className = "";

     strTab(oHandle);

 }

 </script>

 </body>

 </html>

baiduMap试手《办理进京证和市区警察查询进京证的地址浏览》的更多相关文章

  1. HDU——1303Doubles（水题，试手二分查找）

    Doubles Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  2. 浅学JSON——Json.NET之首次试手

    首次遭遇Json格式,缘由项目中用到Json数据,需要进行解析,为此,将Json数据转为了自己较为熟悉的DataTable格式,以此展示至DataGridView中,验证是否成功. 直接上代码: // ...

  3. [Java Web] 3、WEB开发之HTML基础程序试手

    1.初试: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.&l ...

  4. SpringBoot 试手（简易的SpringBoot搭建步骤）

    SpringBoot 也算AI吧,它根据您架构中引用的依赖,自动化地按默认方案帮您完成了Spring那些复杂繁琐的配置工作.为了让您不会看低此 AI 水平,还特地喊出了“约定大于配置”的口号.从这个角 ...

  5. Hadoop入门第三篇-MapReduce试手以及MR工作机制

    MapReduce几个小应用 上篇文章已经介绍了怎么去写一个简单的MR并且将其跑起来,学习一个东西动手还是很有必要的,接下来我们就举几个小demo来体验一下跑起来的快感. demo链接请参照附件:ht ...

  6. VK Cup 2016 - Qualification Round 1——B. Chat Order（试手stack+map）

    B. Chat Order time limit per test 3 seconds memory limit per test 256 megabytes input standard input ...

  7. HDU——1405The Last Practice（试手map）

    The Last Practice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  8. 闲来无事爬了下通讯录 试手 jsdom

    curl http://xxx.com/address/addresslist\?search\=%40 --cookie oa_cookie=123 -s| node parss .js js 代码 ...

  9. 【插件篇】前段bootstrap-table-treegrid试手，解决无法显示树形列表或者图标不显示问题。

    说明:具体代码操作我就不贴了.官方有正规的例子!bootstrap-table-examples传送 使用注意事项: 传入的id和pid可以是string类型的(我后台返回的是Long类型转换成str ...

随机推荐

  1. 利用navicat写mysql的存储过程

    最近项目经理让我给新的活动的预留一个插入红包和查看详情的sql,方便在项目出问题的做一些紧急操作,我想了下这里面还涉及到挺多逻辑和挺多表的一句句查也不方便啊,干脆写到存储过程里,于是开始在navica ...

  2. GridLayout网格布局

    网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布. l  网格每列宽度相同,等于容器的宽度除以网格的列数. l  网格每行高度相同,等于容器的高度除以网格的行数. l  各组件的排列方式 ...

  3. 最简单的基于JavaEE和FFmpeg的视频网站

    最简单的视频网站 Simplest Video Website 雷霄骅 Lei Xiaohua leixiaohua1020@126.com 中国传媒大学/数字电视技术 Communication U ...

  4. linux下仅仅有rman备份集的异机不同文件夹恢复

    昨天在客户那里做了一次rman异机的恢复,把生产库弄一份给測试库用,总库大概80G,总共花费了2个小时,当时客户的环境是windows 11.2.0.3,今天早晨在linux下又一次測试了一下,记录下 ...

  5. Call、Apply和Bind

    首先说一下bind,灵活的通过bind来改变this指针 bind方法会创建一个新函数,称为绑定函数.当调用这个绑定函数时,绑定函数会以创建它时传入bind方法的第一个参数作为this, 传入bind ...

  6. Redis入门手册

    这篇文章主要介绍了超强.超详细Redis入门教程,本文详细介绍了Redis数据库各个方面的知识,需要的朋友可以参考下 [本教程目录] 1.redis是什么 2.redis的作者何许人也 3.谁在使用r ...

  7. （015）实现一个函数来检查是否平衡树（keep it up）

    实现一个函数来检查是否平衡树.这个问题而言. 平衡指的是这棵树随意两个叶子结点到根结点的距离之差不大于1. 这个题我们能够採用暴力搜索,找到叶子节点到根节点的最小值和最大值.然后他们的差假设大于1就不 ...

  8. html5中 table数据导出到excel文件

    JS代码: /** * table数据导出到excel * 形参 table : tableId ; * sheetName : 工作薄名 * fileName : 文件名 * linkId :隐藏的 ...

  9. WPF 4 目录树型显示

    原文:WPF 4 目录树型显示      本篇将通过WPF4 制作简单的目录树型结构显示实例,完成本篇内容我们将作出下图所示的应用程序.      从图中我们可以看到程序主要分为两部分:左边显示本地驱 ...

  10. .Net中使用数据库(sqlite)的大体流程（简单向）

    说来数据库,各种语言各种数据库在操作上大体无异,基本都是连接数据库.操作数据库.关闭数据库连接的流程,不过Sqlite由于是单文件数据库,相比其他服务器的数据库连接更简单,只需要给定数据库文件的路径即 ...