BJ_web_developers / HSpark

Commit 54ee46e1ff0a8505ee15720f1567ee0923eb9bc4

Authored by Andy
1 parent 7767c2ce

add 官网首页地图 驾车路线规划 实时路况检测

Inline Side-by-side
Showing 3 changed files with 911 additions and 61 deletions
public/index.html
  View file @54ee46e
@@ -5,8 +5,13 @@ @@ -5,8 +5,13 @@
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
7 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 7 <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  8 + <!-- 引入百度地图交通路况样式文件 -->
  9 + <link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css"/>
8 <title><%= webpackConfig.name %></title> 10 <title><%= webpackConfig.name %></title>
9 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script> 11 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=cuMSxNl5LOY6sf1M3nDGtG6tGXl5a0Bb"></script>
  12 + <!-- 引入百度地图交通路况文件 -->
  13 + <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
  14 +
10 </head> 15 </head>
11 <body> 16 <body>
12 <noscript> 17 <noscript>
src/views/home.vue
  View file @54ee46e
@@ -7,6 +7,22 @@ @@ -7,6 +7,22 @@
7 <div class="berth"> 7 <div class="berth">
8 <h1 class="title">泊位分布</h1> 8 <h1 class="title">泊位分布</h1>
9 <div class="map" id="map"></div> 9 <div class="map" id="map"></div>
  10 + <!--路线规划-->
  11 + <div class="routebox">
  12 + <div class="searchbox-content-common routebox-content">
  13 + <div class="routebox-inputs">
  14 + <div class="routebox-input route-start">
  15 + <div class="route-input-icon"></div>
  16 + <input autocomplete="off" id="startAddress" maxlength="256" placeholder="输入起点" class="route-start-input" type="text" value="">
  17 + </div>
  18 + <div class="routebox-input route-end">
  19 + <div class="route-input-icon"></div>
  20 + <input autocomplete="off" id="endAddress" maxlength="256" placeholder="输入终点" class="route-end-input" type="text" value="">
  21 + </div>
  22 + </div>
  23 + </div>
  24 + </div>
  25 + <button id="search-button" data-title="搜索" @click='searchByStationName1()'></button>
10 <div class="berth-num"> 26 <div class="berth-num">
11 <p>区域泊位规划</p> 27 <p>区域泊位规划</p>
12 <ul class="berth-list"> 28 <ul class="berth-list">
@@ -19,7 +35,7 @@ @@ -19,7 +35,7 @@
19 </div> 35 </div>
20 </div> 36 </div>
21 <div class="news-wrap"> 37 <div class="news-wrap">
22 - <h1 class="title">新闻/公告中心</h1> 38 + <h1 class="title">新闻公告中心</h1>
23 <div class="fl news-bg"></div> 39 <div class="fl news-bg"></div>
24 <ul class="fl news-con"> 40 <ul class="fl news-con">
25 <li class="clearfix" v-for="(news,id) in newsList" :key="id" @click="showNews(news.noticeId)"> 41 <li class="clearfix" v-for="(news,id) in newsList" :key="id" @click="showNews(news.noticeId)">
@@ -47,6 +63,7 @@ @@ -47,6 +63,7 @@
47 </template> 63 </template>
48 64
49 <script> 65 <script>
  66 + var map;
50 import {queryParkLotInfoByOrgId,queryNoticeForPage,queryNotice} from '@/api/park'; 67 import {queryParkLotInfoByOrgId,queryNoticeForPage,queryNotice} from '@/api/park';
51 import pagination from '@/components/Pagination/index.vue' 68 import pagination from '@/components/Pagination/index.vue'
52 import {string2Date} from '@/filters/index'; 69 import {string2Date} from '@/filters/index';
@@ -69,8 +86,13 @@ @@ -69,8 +86,13 @@
69 pageSize: 7, 86 pageSize: 7,
70 pageSizeS: [8, 16], 87 pageSizeS: [8, 16],
71 pageTotal: 0, 88 pageTotal: 0,
  89 + from: null,
  90 + to: null,
  91 + address_detail: null, //详细地址
  92 + userlocation: {lng: "", lat: ""},
72 //新闻详情 93 //新闻详情
73 newscontent:'', 94 newscontent:'',
  95 +
74 } 96 }
75 }, 97 },
76 computed: { 98 computed: {
@@ -135,36 +157,104 @@ @@ -135,36 +157,104 @@
135 baiduMap(mapDatas) { 157 baiduMap(mapDatas) {
136 if (mapDatas.length === 0) { 158 if (mapDatas.length === 0) {
137 // 百度地图API功能 159 // 百度地图API功能
138 - let map = new BMap.Map("map", {enableMapClick: false}); 160 + map = new BMap.Map("map", {enableMapClick: false});
139 let point = new BMap.Point(115.078186, 30.232887); 161 let point = new BMap.Point(115.078186, 30.232887);
140 map.centerAndZoom(point, 15); 162 map.centerAndZoom(point, 15);
141 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 163 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
142 - let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 164 + // let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
143 let top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件 165 let top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
144 let top_right_navigation = new BMap.NavigationControl({ 166 let top_right_navigation = new BMap.NavigationControl({
145 anchor: BMAP_ANCHOR_TOP_RIGHT, 167 anchor: BMAP_ANCHOR_TOP_RIGHT,
146 type: BMAP_NAVIGATION_CONTROL_SMALL 168 type: BMAP_NAVIGATION_CONTROL_SMALL
147 }); //右上角，仅包含平移和缩放按钮 169 }); //右上角，仅包含平移和缩放按钮
148 - map.addControl(top_left_control); 170 + // map.addControl(top_left_control);
149 map.addControl(top_left_navigation); 171 map.addControl(top_left_navigation);
150 - map.addControl(top_right_navigation); 172 + // map.addControl(top_right_navigation);
  173 + const ctrl = new BMapLib.TrafficControl({
  174 + showPanel: true , // 是否显示路况提示面板
  175 + });
  176 + map.addControl(ctrl);
  177 + ctrl.showTraffic({ predictDate: { hour: 15, weekday: 5 } });
  178 + ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
  179 + ctrl.setOffset(new BMap.Size(85, 27));
  180 + var localSearch = new BMap.LocalSearch(map);
  181 + localSearch.enableAutoViewport(); //允许自动调节窗体大小
151 map.clearOverlays(); 182 map.clearOverlays();
152 } 183 }
153 else { 184 else {
  185 + var th = this;
154 // 百度地图API功能 186 // 百度地图API功能
155 - let map = new BMap.Map("map", {enableMapClick: false}); 187 + map = new BMap.Map("map", {enableMapClick: false});
156 let point = new BMap.Point(mapDatas[0].lonId, mapDatas[0].latId); 188 let point = new BMap.Point(mapDatas[0].lonId, mapDatas[0].latId);
157 map.centerAndZoom(point, 18); 189 map.centerAndZoom(point, 18);
158 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 190 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
159 - let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺 191 + // let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
160 let top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件 192 let top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
161 let top_right_navigation = new BMap.NavigationControl({ 193 let top_right_navigation = new BMap.NavigationControl({
162 anchor: BMAP_ANCHOR_TOP_RIGHT, 194 anchor: BMAP_ANCHOR_TOP_RIGHT,
163 type: BMAP_NAVIGATION_CONTROL_SMALL 195 type: BMAP_NAVIGATION_CONTROL_SMALL
164 }); //右上角，仅包含平移和缩放按钮 196 }); //右上角，仅包含平移和缩放按钮
165 - map.addControl(top_left_control); 197 + // map.addControl(top_left_control);
166 map.addControl(top_left_navigation); 198 map.addControl(top_left_navigation);
167 - map.addControl(top_right_navigation); 199 + const ctrl = new BMapLib.TrafficControl({
  200 + showPanel: true , // 是否显示路况提示面板
  201 + });
  202 + map.addControl(ctrl);
  203 + ctrl.showTraffic({ predictDate: { hour: 15, weekday: 5 } });
  204 + ctrl.setAnchor(BMAP_ANCHOR_TOP_LEFT);
  205 + ctrl.setOffset(new BMap.Size(85, 27));
  206 + var localSearch = new BMap.LocalSearch(map);
  207 + localSearch.enableAutoViewport(); //允许自动调节窗体大小
  208 + //起点自动搜索功能
  209 + var ac1 = new BMap.Autocomplete( //建立一个自动完成的对象
  210 + {
  211 + "input": "startAddress","location": map
  212 + })
  213 + var myValue;
  214 + ac1.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
  215 + var _value = e.item.value;
  216 + myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
  217 + this.address_detail = myValue
  218 + setPlace();
  219 + });
  220 + function setPlace() {
  221 + map.clearOverlays(); //清除地图上所有覆盖物
  222 + function myFun() {
  223 + th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  224 + map.centerAndZoom(th.userlocation, 18);
  225 + map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
  226 + }
  227 +
  228 + var local = new BMap.LocalSearch(map, { //智能搜索
  229 + onSearchComplete: myFun
  230 + });
  231 + local.search(myValue);
  232 + };
  233 + //终点自动搜索功能
  234 + var ac2 = new BMap.Autocomplete( //建立一个自动完成的对象
  235 + {
  236 + "input": "endAddress","location": map
  237 + })
  238 + var myValue1;
  239 + ac2.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
  240 + var _value = e.item.value;
  241 + myValue1 = _value.province + _value.city + _value.district + _value.street + _value.business;
  242 + this.address_detail = myValue1
  243 + setPlace1();
  244 + });
  245 + function setPlace1() {
  246 + map.clearOverlays(); //清除地图上所有覆盖物
  247 + function myFun1() {
  248 + th.userlocation = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
  249 + map.centerAndZoom(th.userlocation, 18);
  250 + map.addOverlay(new BMap.Marker(th.userlocation)); //添加标注
  251 + }
  252 +
  253 + var local = new BMap.LocalSearch(map, { //智能搜索
  254 + onSearchComplete: myFun1
  255 + });
  256 + local.search(myValue);
  257 + }
168 map.clearOverlays(); 258 map.clearOverlays();
169 let i = 0; 259 let i = 0;
170 let points = []; 260 let points = [];
@@ -226,6 +316,68 @@ @@ -226,6 +316,68 @@
226 } 316 }
227 } 317 }
228 }, 318 },
  319 + searchByStationName1: function () {
  320 + var _this = this;
  321 + var startAddrr = document.getElementById("startAddress").value;//获得起点地名
  322 + var localSearch = new BMap.LocalSearch(map);
  323 + localSearch.setSearchCompleteCallback(function (searchResult) {
  324 + var poi = searchResult.getPoi(0);//获得起点经纬度坐标
  325 + if (poi != null) { //判断地名是否存在
  326 + console.log('from poi', poi);
  327 + _this.from = poi.point;
  328 + console.log('from', _this.from);
  329 + _this.searchByStationName2();
  330 + }
  331 + else{
  332 + alert("请输入正确的地名！")
  333 + }
  334 + });
  335 + localSearch.search(startAddrr);
  336 + },
  337 + searchByStationName2: function () {
  338 + var _this = this;
  339 + var endAddrr = document.getElementById("endAddress").value; //获得目的地地名
  340 + var localSearch = new BMap.LocalSearch(map);
  341 + localSearch.setSearchCompleteCallback(function (searchResult) {
  342 + var poi = searchResult.getPoi(0); //获得目的地经纬度坐标
  343 + if (poi != null) { //判断目的地是否存在
  344 + _this.to = poi.point;
  345 + _this.run();
  346 + }
  347 + else{
  348 + alert("请输入正确的地名！")
  349 + }
  350 +
  351 + });
  352 + localSearch.search(endAddrr);
  353 + },
  354 + run: function () {
  355 + map.clearOverlays() // 清除地图上所有的覆盖物
  356 + var driving = new BMap.DrivingRoute(map) // 创建驾车实例
  357 + driving.search(this.from, this.to) // 搜索
  358 + let that = this;
  359 + driving.setSearchCompleteCallback(function () {
  360 + console.log('completeCallback start!');
  361 + var pts = driving.getResults().getPlan(0).getRoute(0).getPath() // 通过步行实例，获得一系列点的数组
  362 +
  363 + var polyline = new BMap.Polyline(pts);
  364 + map.addOverlay(polyline);
  365 + console.log('pollyline!', polyline);
  366 + var m1 = new BMap.Marker(that.from); // 创建2个marker
  367 + var m2 = new BMap.Marker(that.to);
  368 + map.addOverlay(m1)
  369 + map.addOverlay(m2)
  370 +
  371 + var lab1 = new BMap.Label('起点', {position: that.from}) // 创建2个label
  372 + var lab2 = new BMap.Label('终点', {position: that.to})
  373 + map.addOverlay(lab1)
  374 + map.addOverlay(lab2)
  375 + console.log('setTimeout!');
  376 + setTimeout(function () {
  377 + map.setViewport([that.from, that.to]) // 调整到最佳视野
  378 + }, 1000)
  379 + })
  380 + },
229 //新闻中心 381 //新闻中心
230 getNoticeForPage(){ 382 getNoticeForPage(){
231 let req={ 383 let req={
@@ -303,8 +455,8 @@ @@ -303,8 +455,8 @@
303 width: 323px; 455 width: 323px;
304 height: 368px; 456 height: 368px;
305 position: absolute; 457 position: absolute;
306 - top: 200px;  
307 - right: 80px; 458 + bottom: 70px;
  459 + left: 8px;
308 background: url("../assets/home/berth.png") no-repeat; 460 background: url("../assets/home/berth.png") no-repeat;
309 p { 461 p {
310 padding-top: 20px; 462 padding-top: 20px;
@@ -376,61 +528,86 @@ @@ -376,61 +528,86 @@
376 text-align: justify; 528 text-align: justify;
377 } 529 }
378 } 530 }
379 -/*  
380 - .date {  
381 - width: 83px;  
382 - height: 83px;  
383 - margin-right: 20px;  
384 - background: #FF5656; 531 + #tcWrap .maplibTcColor{
  532 + height: 15px;
  533 + }
  534 + /*路线规划*/
  535 + .routebox {
  536 + -webkit-transition: max-height 1s ease-in;
  537 + transition: max-height 1s ease-in;
  538 + overflow: hidden;
  539 + position: absolute;
  540 + top: 160px;
  541 + right: 87px;
  542 + width: 289px;
  543 + height: 80px;
  544 + }
  545 + .routebox .routebox-content {
  546 + height: auto!important;
385 position: relative; 547 position: relative;
386 - h3 {  
387 - padding-top: 15px;  
388 - font-size: 32px;  
389 - color: rgba(255, 255, 255, 1);  
390 - }  
391 - h5 {  
392 - font-size: 12px;  
393 - text-align: right;  
394 - padding-right: 10px;  
395 - color: #Fff;  
396 - }  
397 - &:before {  
398 - content: '';  
399 - position: absolute;  
400 - right: 14px;  
401 - bottom: 36px;  
402 - transform: rotate(-45deg);  
403 - width: 25px;  
404 - height: 1px;  
405 - background: rgba(255, 255, 255, 1)  
406 - }  
407 } 548 }
408 -  
409 - .des h3 {  
410 - padding-bottom: 15px;  
411 - font-size: 20px;  
412 - color: #0D1A26;  
413 - cursor: pointer; 549 + .searchbox-content .searchbox-content-common {
  550 + box-sizing: border-box;
  551 + float: left;
  552 + width: 329px;
  553 + height: 38px;
414 } 554 }
415 -  
416 - .des p {  
417 - width: 430px;  
418 - line-height: 22px;  
419 - color: #314659;  
420 - }*/  
421 -  
422 - /*.index_cont .dislog-wrap {  
423 - height: 30px;  
424 - line-height: 30px; 555 + .routebox .routebox-content .routebox-input {
  556 + height: 40px;
  557 + width: 289px;
  558 + border-bottom: 1px solid #eaebed;
  559 + position: relative;
  560 + }
  561 + .routebox .routebox-content .routebox-input .route-input-icon {
  562 + width: 11px;
  563 + height: 10px;
  564 + background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/start_ee17f81.png) no-repeat 0 0;
  565 + position: absolute;
  566 + top: 15px;
  567 + left: 3px;
  568 + }
  569 + .routebox .routebox-content .routebox-input input {
  570 + box-sizing: border-box;
  571 + border: 0;
  572 + height: 100%;
425 width: 100%; 573 width: 100%;
426 - padding: 0 4px;  
427 - border-radius: 4px;  
428 - background-color: #3a8ee6;  
429 - color: #fff; 574 + padding: 10px 0;
430 font-size: 14px; 575 font-size: 14px;
431 - text-align: center;  
432 - white-space: nowrap;  
433 - }*/ 576 + border-left: 20px solid transparent;
  577 + border-right: 27px solid transparent;
  578 + line-height: 20px;
  579 + outline: 0;
  580 + font-family: inherit;
  581 + }
  582 + .routebox .routebox-content .routebox-input {
  583 + height: 40px;
  584 + width: 289px;
  585 + border-bottom: 1px solid #eaebed;
  586 + position: relative;
  587 + }
  588 + .routebox .routebox-content .routebox-input:last-child {
  589 + border-bottom: 0;
  590 + }
  591 + .routebox .routebox-content .routebox-input.route-end .route-input-icon {
  592 + background: url(//webmap0.bdimg.com/wolfman/static/common/images/new/end_e68ad9a.png) no-repeat 0 0;
  593 + }
  594 + #search-button {
  595 + pointer-events: auto;
  596 + background: url(//webmap1.bdimg.com/wolfman/static/common/images/new/searchbox_5c0d97d.png) no-repeat 0 -76px #3385ff;
  597 + width: 57px;
  598 + height: 38px;
  599 + float: left;
  600 + border: 0;
  601 + padding: 0;
  602 + cursor: pointer;
  603 + border-radius: 0 2px 2px 0;
  604 + box-shadow: 1px 2px 1px rgba(0,0,0,.15);
  605 + outline: 0;
  606 + font-family: inherit;
  607 + position: absolute;
  608 + top: 160px;
  609 + right: 30px;
  610 + }
434 /*新闻内容 样式*/ 611 /*新闻内容 样式*/
435 .news_cont h1 { 612 .news_cont h1 {
436 font-size: 36px !important; 613 font-size: 36px !important;
static/traffuccontrol.js 0 → 100644
  View file @54ee46e
  1 +var BMapLib = window.BMapLib = BMapLib || {};
  2 +(function () {
  3 + var c, a = c = a || {
  4 + version: "1.3.9"
  5 + };
  6 + a.guid = "$BAIDU$";
  7 + (function () {
  8 + a.dom = a.dom || {};
  9 + a.event = a.event || {};
  10 + a.lang = a.lang || {};
  11 + a.browser = a.browser || {};
  12 + a.dom.addClass = function (p, q) {
  13 + p = a.dom.g(p);
  14 + var k = q.split(/\s+/),
  15 + j = p.className,
  16 + o = " " + j + " ",
  17 + n = 0,
  18 + m = k.length;
  19 + for (; n < m; n++) {
  20 + if (o.indexOf(" " + k[n] + " ") < 0) {
  21 + j += (j ? " " : "") + k[n]
  22 + }
  23 + }
  24 + p.className = j;
  25 + return p
  26 + };
  27 + a.addClass = a.dom.addClass;
  28 + a.dom.removeClass = function (p, q) {
  29 + p = a.dom.g(p);
  30 + var n = p.className.split(/\s+/),
  31 + r = q.split(/\s+/),
  32 + l, k = r.length,
  33 + m, o = 0;
  34 + for (; o < k; ++o) {
  35 + for (m = 0, l = n.length; m < l; ++m) {
  36 + if (n[m] == r[o]) {
  37 + n.splice(m, 1);
  38 + break
  39 + }
  40 + }
  41 + }
  42 + p.className = n.join(" ");
  43 + return p
  44 + };
  45 + a.removeClass = a.dom.removeClass;
  46 + a.dom.getComputedStyle = function (k, j) {
  47 + k = a.dom._g(k);
  48 + var m = a.dom.getDocument(k),
  49 + l;
  50 + if (m.defaultView && m.defaultView.getComputedStyle) {
  51 + l = m.defaultView.getComputedStyle(k, null);
  52 + if (l) {
  53 + return l[j] || l.getPropertyValue(j)
  54 + }
  55 + }
  56 + return ""
  57 + };
  58 + a.dom.getStyle = function (k, j) {
  59 + var m = a.dom;
  60 + k = m.g(k);
  61 + var l = k.style[j] || (k.currentStyle ? k.currentStyle[j] : "") || m.getComputedStyle(k, j);
  62 + return l
  63 + };
  64 + a.getStyle = a.dom.getStyle;
  65 + a.dom.getDocument = function (j) {
  66 + j = a.dom.g(j);
  67 + return j.nodeType == 9 ? j : j.ownerDocument || j.document
  68 + };
  69 + a.dom.g = function (j) {
  70 + if ("string" == typeof j || j instanceof String) {
  71 + return document.getElementById(j)
  72 + } else {
  73 + if (j && j.nodeName && (j.nodeType == 1 || j.nodeType == 9)) {
  74 + return j
  75 + }
  76 + }
  77 + return null
  78 + };
  79 + a.g = a.G = a.dom.g;
  80 + a.dom._g = function (j) {
  81 + if (a.lang.isString(j)) {
  82 + return document.getElementById(j)
  83 + }
  84 + return j
  85 + };
  86 + a._g = a.dom._g;
  87 + a.lang.isString = function (j) {
  88 + return "[object String]" == Object.prototype.toString.call(j)
  89 + };
  90 + a.isString = a.lang.isString;
  91 + a.event._listeners = a.event._listeners || [];
  92 + a.event.on = function (k, n, p) {
  93 + n = n.replace(/^on/i, "");
  94 + k = a.dom._g(k);
  95 + var o = function (r) {
  96 + p.call(k, r)
  97 + },
  98 + j = a.event._listeners,
  99 + m = a.event._eventFilter,
  100 + q, l = n;
  101 + n = n.toLowerCase();
  102 + if (m && m[n]) {
  103 + q = m[n](k, n, o);
  104 + l = q.type;
  105 + o = q.listener
  106 + }
  107 + if (k.addEventListener) {
  108 + k.addEventListener(l, o, false)
  109 + } else {
  110 + if (k.attachEvent) {
  111 + k.attachEvent("on" + l, o)
  112 + }
  113 + }
  114 + j[j.length] = [k, n, p, o, l];
  115 + return k
  116 + };
  117 + a.on = a.event.on;
  118 + a.event.un = function (l, o, k) {
  119 + l = a.dom._g(l);
  120 + o = o.replace(/^on/i, "").toLowerCase();
  121 + var r = a.event._listeners,
  122 + m = r.length,
  123 + n = !k,
  124 + q, p, j;
  125 + while (m--) {
  126 + q = r[m];
  127 + if (q[1] === o && q[0] === l && (n || q[2] === k)) {
  128 + p = q[4];
  129 + j = q[3];
  130 + if (l.removeEventListener) {
  131 + l.removeEventListener(p, j, false)
  132 + } else {
  133 + if (l.detachEvent) {
  134 + l.detachEvent("on" + p, j)
  135 + }
  136 + }
  137 + r.splice(m, 1)
  138 + }
  139 + }
  140 + return l
  141 + };
  142 + a.un = a.event.un;
  143 + if (/msie (\d+\.\d)/i.test(navigator.userAgent)) {
  144 + a.browser.ie = a.ie = document.documentMode || +RegExp["\x241"]
  145 + }
  146 + a.platform = a.platform || {};
  147 + a.platform.isIphone = /iphone/i.test(navigator.userAgent);
  148 + a.platform.isAndroid = /android/i.test(navigator.userAgent);
  149 + a.platform.isIpad = /ipad/i.test(navigator.userAgent);
  150 + a.isMobile = function () {
  151 + return !!(a.platform.isIphone || a.platform.isIpad || a.platform.isAndroid)
  152 + }
  153 + })();
  154 + var h = a.isMobile() ? "_mobile" : "_deskTop";
  155 + var g = BMapLib.TrafficControl = function (j) {
  156 + this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
  157 + this.defaultOffset = new BMap.Size(10, 10);
  158 + this.showPanel = j && j.showPanel
  159 + };
  160 + g.prototype = new BMap.Control();
  161 + g.prototype.initialize = function (l) {
  162 + var j = d("div", {
  163 + title: "显示交通流量",
  164 + id: "tcBtn",
  165 + "class": "maplibTcBtn" + h + " maplibTcBtnOff" + h
  166 + });
  167 + l.getContainer().appendChild(j);
  168 + this._map = l;
  169 + this._popUpDiv(this, j);
  170 + var k = this;
  171 + this.btn = j;
  172 + return j
  173 + };
  174 + g.prototype._popUpDiv = function (F, w) {
  175 + var F = this;
  176 + var x = ["查看实时路况", "流量预测"];
  177 + var l = ["查看流量预测", "实时路况"];
  178 + var A = true;
  179 + this.bShow = false;
  180 + var D = this;
  181 + D._bind = false;
  182 + b(w, "afterEnd", u());
  183 + b(w, "afterEnd", H());
  184 + var B = a.g("tcViewPrediction");
  185 + var t = a.g("tcPredition");
  186 + var G = a.g("tcTitle");
  187 + var n = a.g("maplibTcDay");
  188 + var y = a.g("tcNow");
  189 + var p = a.g("tcWrap");
  190 + var v = a.g("tcTimeBox");
  191 + var z = a.g("tcUpdate");
  192 + var j = ["一", "二", "三", "四", "五", "六", "日"];
  193 + var s = new E(F);
  194 + this.show = function () {
  195 + k();
  196 + F.bShow = true;
  197 + a.dom.removeClass(w, "maplibTcBtnOff" + h)
  198 + };
  199 + this.hide = function () {
  200 + F.bShow = false;
  201 + a.dom.addClass(w, "maplibTcBtnOff" + h);
  202 + if (a.isMobile()) {
  203 + a.dom.addClass("tcWrap_mobile", "maplibTfctrHide")
  204 + } else {
  205 + a.dom.addClass("tcWrap", "maplibTcHide");
  206 + a.dom.addClass("tcPredition", "maplibTcHide")
  207 + }
  208 + F.hideTraffic()
  209 + };
  210 + this.isbShow = function () {
  211 + return F.bShow
  212 + };
  213 + this.setPopOffset = function (J) {
  214 + var L = 24;
  215 + var K = J.height + L + "px";
  216 + var I = J.width + "px";
  217 + switch (F.getAnchor()) {
  218 + case BMAP_ANCHOR_TOP_LEFT:
  219 + p.style.top = K;
  220 + p.style.left = I;
  221 + break;
  222 + case BMAP_ANCHOR_TOP_RIGHT:
  223 + p.style.top = K;
  224 + p.style.right = I;
  225 + break;
  226 + case BMAP_ANCHOR_BOTTOM_RIGHT:
  227 + p.style.bottom = K;
  228 + p.style.right = I;
  229 + break;
  230 + case BMAP_ANCHOR_BOTTOM_LEFT:
  231 + p.style.bottom = K;
  232 + p.style.left = I;
  233 + break
  234 + }
  235 + };
  236 + var r = a.isMobile() ? "ontouchend" : "onclick";
  237 + a.event.on(w, r, function () {
  238 + o()
  239 + });
  240 + a.event.on("tcClose", "click", function (I) {
  241 + o()
  242 + });
  243 +
  244 + function o() {
  245 + if (!D.isbShow()) {
  246 + D.setPopOffset(F.getOffset());
  247 + D.show()
  248 + } else {
  249 + D.hide()
  250 + }
  251 + }
  252 +
  253 + function k() {
  254 + n.innerHTML = "更新时间";
  255 + G.innerHTML = l[1];
  256 + B.innerHTML = l[0];
  257 + a.dom.addClass(t, "maplibTcHide");
  258 + z.style.display = "block";
  259 + A = true;
  260 + if (a.isMobile()) {
  261 + if (F.showPanel) {
  262 + a.dom.removeClass("tcWrap_mobile", "maplibTfctrHide")
  263 + }
  264 + } else {
  265 + a.dom.removeClass("tcWrap", "maplibTcHide")
  266 + }
  267 + var K = a.g("tcWeek").getElementsByTagName("a");
  268 + for (var J = 0; J < 7; J++) {
  269 + K[J].className = ""
  270 + }
  271 + var I =
  272 + "http://its.map.baidu.com:8002/traffic/GetCurrentTime?callback=BMapLib.TrafficControl.getTime&";
  273 + e(I + (new Date()).getTime(), L);
  274 + if (F.timer) {
  275 + clearInterval(F.timer)
  276 + }
  277 + F.timer = setInterval(function () {
  278 + e(I + (new Date()).getTime(), function () {
  279 + if (F.bShow) {
  280 + var N = g.curTime;
  281 + var M = N.getHours();
  282 + var O = (M < 10 ? ("0" + M) : M) + ":" + (N.getMinutes() < 10 ? ("0" +
  283 + N.getMinutes()) : N.getMinutes());
  284 + y.innerHTML = O;
  285 + F.hideTraffic();
  286 + F.showTraffic()
  287 + }
  288 + })
  289 + }, 1000 * 3 * 60);
  290 +
  291 + function L() {
  292 + var N = g.curTime;
  293 + var M = N.getHours();
  294 + if (!D._bind) {
  295 + C(F);
  296 + m(F);
  297 + D._bind = true
  298 + }
  299 + var O = (M < 10 ? ("0" + M) : M) + ":" + (N.getMinutes() < 10 ? ("0" + N.getMinutes()) : N.getMinutes());
  300 + y.innerHTML = O;
  301 + F.hour = M;
  302 + F.weekday = N.getDay() == 0 ? 7 : N.getDay();
  303 + F.time = O;
  304 + s.setBarTime(M)
  305 + }
  306 + }
  307 +
  308 + function H() {
  309 + return '<div class="maplibTfctr maplibTfctrHide" id="tcWrap_mobile" style="position: absolute; z-index: 10; -webkit-text-size-adjust: none; bottom: 17px; right: auto; top: auto; left:50%;margin-left:-4.5em;"><div class="maplibTfctr_l"></div><div class="maplibTfctr_c">实时路况</div><div class="maplibTfctr_status"><span class="maplibR">堵</span><span class="maplibY">缓</span><span class="maplibG">畅</span></div></div>'
  310 + }
  311 +
  312 + function u() {
  313 + var I = ['<div class="maplibTc maplibTcHide" id="tcWrap">'];
  314 + I.push('<div class="maplibTcColor" id="tcTitle">实时路况</div>');
  315 + I.push('<div id="tcRealTime">');
  316 + I.push(
  317 + '<div class="maplibTcTime"><span id="maplibTcDay" class="maplibTcCurTime">更新时间</span><span><span class="maplibTcColon">： </span><span class="maplibTcCurTime" id="tcNow"></span><span title="更新" id="tcUpdate" class="maplibTcUpdate"></span> <a href="javascript:void(0)" class="maplibTcView" id="tcViewPrediction">查看流量预测</a><button class="maplibTcClose" id="tcClose"></button></div></div>'
  318 + );
  319 + I.push('<div id="tcPredition" class="maplibTcHide">');
  320 + I.push(
  321 + '<div class="maplibTcWeekDay"><span>星期</span><ul id="tcWeek"><li><a lang="1" href="javascript:void(0)">一</a></li><li><a lang="2" href="javascript:void(0)">二</a></li><li><a lang="3" href="javascript:void(0)">三</a></li><li><a lang="4" href="javascript:void(0)">四</a></li><li><a lang="5" href="javascript:void(0)">五</a></li><li><a lang="6" href="javascript:void(0)">六</a></li><li><a lang="7" href="javascript:void(0)">日</a></li></ul></div>'
  322 + );
  323 + I.push('<div><div class="maplibTcRuleTxt">时间</div>');
  324 + I.push('<div class="maplibTcRule">');
  325 + I.push('<div><div class="maplibTcTimeBox" id="tcTimeBox">20:00</div></div>');
  326 + I.push('<div class="maplibTcTimeline" >');
  327 + I.push('<div class="maplibTcTimelinePrev" id="tcPrev"></div>');
  328 + I.push('<div class="maplibTcTimeMove" id="tcMove"></div>');
  329 + I.push('<div class="maplibTcTimelineNext" id="tcNext"></div>');
  330 + I.push("</div></div></div>");
  331 + I.push(
  332 + '<div class="maplibTcClear" style="text-align: center; color: #ccc;">（基于历史流量统计预测 仅供参考）</div>'
  333 + );
  334 + I.push("</div></div></div>");
  335 + return I.join("")
  336 + }
  337 +
  338 + function C(J) {
  339 + a.event.on("tcViewPrediction", "click", function () {
  340 + if (A) {
  341 + I()
  342 + } else {
  343 + k()
  344 + }
  345 + });
  346 +
  347 + function I() {
  348 + if (J.timer) {
  349 + clearInterval(J.timer)
  350 + }
  351 + G.innerHTML = x[1];
  352 + B.innerHTML = x[0];
  353 + a.dom.removeClass(t, "maplibTcHide");
  354 + z.style.display = "none";
  355 + A = false;
  356 + n.innerHTML = "星期" + j[J.weekday - 1];
  357 + y.innerHTML = v.innerHTML;
  358 + J.showTraffic({
  359 + predictDate: {
  360 + hour: J.hour,
  361 + weekday: J.weekday
  362 + }
  363 + })
  364 + }
  365 + a.event.on("tcUpdate", "click", function () {
  366 + k()
  367 + })
  368 + }
  369 +
  370 + function q() {
  371 + n.innerHTML = "星期" + j[F.weekday - 1];
  372 + y.innerHTML = v.innerHTML
  373 + }
  374 +
  375 + function m(I) {
  376 + a.event.on("tcWeek", "onclick", function (L) {
  377 + var K = L.target || L.srcElement;
  378 + if (K.tagName.toLowerCase() == "a") {
  379 + var M = a.g("tcWeek").getElementsByTagName("a");
  380 + for (var J = 0; J < 7; J++) {
  381 + M[J].className = ""
  382 + }
  383 + a.dom.addClass(K, "maplibTcOn");
  384 + I.weekday = (parseInt(f(K, "lang"), 10));
  385 + q();
  386 + I.showTraffic({
  387 + predictDate: {
  388 + hour: I.hour,
  389 + weekday: I.weekday
  390 + }
  391 + })
  392 + }
  393 + })
  394 + }
  395 +
  396 + function E(M) {
  397 + var J;
  398 + var O = a.g("tcMove");
  399 +
  400 + function N(R) {
  401 + a.on(document, "onmousemove", Q);
  402 + a.on(document, "onmouseup", I);
  403 + if (R && R.preventDefault) {
  404 + R.preventDefault()
  405 + } else {
  406 + window.event.returnValue = false
  407 + }
  408 + return false
  409 + }
  410 +
  411 + function Q(U) {
  412 + var R = U.clientX || U.x;
  413 + var T = i(a.G("tcPrev")).left + 9;
  414 + var S = R - T - 4;
  415 + if (S < 0) {
  416 + S = 0
  417 + }
  418 + if (S > 165) {
  419 + S = 165
  420 + }
  421 + if (a.browser.ie <= 6) {
  422 + O.style.marginLeft = (S * 0.53) + "px"
  423 + } else {
  424 + O.style.marginLeft = S + "px"
  425 + }
  426 + v.style.marginLeft = (S) + "px";
  427 + L()
  428 + }
  429 +
  430 + function I() {
  431 + a.un(document, "onmousemove", Q);
  432 + a.un(document, "onmouseup", I);
  433 + M.showTraffic({
  434 + predictDate: {
  435 + hour: M.hour,
  436 + weekday: M.weekday
  437 + }
  438 + })
  439 + }
  440 + a.on(O, "onmousedown", N);
  441 + a.on("tcPrev", "click", function () {
  442 + P("prev")
  443 + });
  444 + a.on("tcNext", "click", function () {
  445 + P("next")
  446 + });
  447 +
  448 + function P(R) {
  449 + var S = v;
  450 + var T = parseInt(a.dom.getStyle("tcTimeBox", "marginLeft"));
  451 + var U = Math.ceil((T - 4) * 24 / 165);
  452 + K(R == "next" ? (U + 1) : (U - 1))
  453 + }
  454 + this.setBarTime = function (R) {
  455 + K(R)
  456 + };
  457 +
  458 + function K(T) {
  459 + if (T < 0) {
  460 + T = 0
  461 + }
  462 + if (T > 24) {
  463 + T = 24
  464 + }
  465 + J = T;
  466 + var S = T * (165 / 24);
  467 + v.style.marginLeft = S + "px";
  468 + var R = a.g("tcMove");
  469 + if (a.browser.ie <= 6 && a.browser.ie > 0) {
  470 + R.style.marginLeft = (S * 0.53) + "px"
  471 + } else {
  472 + R.style.marginLeft = S + "px"
  473 + }
  474 + M.hour = J;
  475 + if (A) {
  476 + M.showTraffic()
  477 + } else {
  478 + M.showTraffic({
  479 + predictDate: {
  480 + hour: M.hour,
  481 + weekday: M.weekday
  482 + }
  483 + })
  484 + }
  485 + L()
  486 + }
  487 +
  488 + function L() {
  489 + var R = parseInt(v.style.marginLeft);
  490 + var S = Math.ceil((R - 4) * 24 / 165);
  491 + J = S;
  492 + M.hour = S;
  493 + if (S < 10) {
  494 + S = "0" + S
  495 + }
  496 + if (A) {
  497 + y.innerHTML = M.time;
  498 + v.innerHTML = S + ":00"
  499 + } else {
  500 + y.innerHTML = v.innerHTML = S + ":00"
  501 + }
  502 + }
  503 + }
  504 + };
  505 + g.prototype.showTraffic = function (j) {
  506 + var k;
  507 + if (this._trafficLayer) {
  508 + this._map.removeTileLayer(this._trafficLayer)
  509 + }
  510 + if (j) {
  511 + if (j.predictDate.weekday > 7 || j.predictDate.weekday < 1) {
  512 + return
  513 + }
  514 + k = new BMap.TrafficLayer(j)
  515 + } else {
  516 + k = new BMap.TrafficLayer()
  517 + }
  518 + this.bShow = true;
  519 + if (a.isMobile()) {
  520 + a.dom.removeClass(this.btn, "maplibTcBtnOff" + h)
  521 + }
  522 + this._map.addTileLayer(k);
  523 + this._trafficLayer = k
  524 + };
  525 + g.prototype.hideTraffic = function () {
  526 + this.bShow = false;
  527 + if (this._trafficLayer) {
  528 + this._map.removeTileLayer(this._trafficLayer);
  529 + this._trafficLayer = null
  530 + }
  531 + if (a.isMobile()) {
  532 + a.dom.addClass(this.btn, "maplibTcBtnOff" + h)
  533 + }
  534 + };
  535 + g.prototype.remove = function () {
  536 + this.hideTraffic();
  537 + var j = a.g("tcWrap");
  538 + j.parentNode.removeChild(j);
  539 + BMap.Control.prototype.remove.call(this);
  540 + if (this.timer) {
  541 + clearInterval(this.timer)
  542 + }
  543 + };
  544 +
  545 + function f(k, j, l) {
  546 + if (!j || j.constructor != String) {
  547 + return ""
  548 + }
  549 + j = {
  550 + "for": "htmlFor",
  551 + "class": "className"
  552 + } [j] || j;
  553 + if (typeof l != "undefined") {
  554 + k[j] = l;
  555 + if (k.setAttribute) {
  556 + k.setAttribute(j, l)
  557 + }
  558 + }
  559 + return k[j] || k.getAttribute(j) || ""
  560 + }
  561 +
  562 + function d(l, k) {
  563 + var n = document.createElement(l);
  564 + k = k || {};
  565 + for (var m in k) {
  566 + value = k[m];
  567 + m = j()[m] || m;
  568 + if (m == "style") {
  569 + n.style.cssText = value;
  570 + continue
  571 + }
  572 + if (n.setAttribute) {
  573 + n.setAttribute(m, value)
  574 + } else {
  575 + try {
  576 + n[m] = value
  577 + } catch (n) {}
  578 + }
  579 + }
  580 + return n;
  581 +
  582 + function j() {
  583 + var o = {
  584 + cellpadding: "cellPadding",
  585 + cellspacing: "cellSpacing",
  586 + colspan: "colSpan",
  587 + rowspan: "rowSpan",
  588 + valign: "vAlign"
  589 + };
  590 + if (a.browser.ie < 8) {
  591 + o["for"] = "htmlFor";
  592 + o["class"] = "className"
  593 + } else {
  594 + o.htmlFor = "for";
  595 + o.className = "class"
  596 + }
  597 + return o
  598 + }
  599 + }
  600 +
  601 + function i(j) {
  602 + var k = {
  603 + left: 0,
  604 + top: 0
  605 + };
  606 + while (j && j.offsetParent) {
  607 + k.left += j.offsetLeft;
  608 + k.top += j.offsetTop;
  609 + j = j.offsetParent
  610 + }
  611 + return k
  612 + }
  613 +
  614 + function b(m, j, l) {
  615 + var k, n;
  616 + if (m.insertAdjacentHTML) {
  617 + m.insertAdjacentHTML(j, l)
  618 + } else {
  619 + k = m.ownerDocument.createRange();
  620 + j = j.toUpperCase();
  621 + if (j == "AFTERBEGIN" || j == "BEFOREEND") {
  622 + k.selectNodeContents(m);
  623 + k.collapse(j == "AFTERBEGIN")
  624 + } else {
  625 + n = j == "BEFOREBEGIN";
  626 + k[n ? "setStartBefore" : "setEndAfter"](m);
  627 + k.collapse(n)
  628 + }
  629 + k.insertNode(k.createContextualFragment(l))
  630 + }
  631 + return m
  632 + }
  633 +
  634 + function e(k, l) {
  635 + var j = document.createElement("script");
  636 + j.setAttribute("src", k);
  637 + j.setAttribute("type", "text/javascript");
  638 + j.setAttribute("charset", "gbk");
  639 + if (j.addEventListener) {
  640 + j.addEventListener("load", function (n) {
  641 + var m = n.target;
  642 + m.parentNode.removeChild(m);
  643 + if (l) {
  644 + l()
  645 + }
  646 + }, false)
  647 + } else {
  648 + if (j.attachEvent) {
  649 + j.attachEvent("onreadystatechange", function (n) {
  650 + var m = window.event.srcElement;
  651 + if (m && (m.readyState == "loaded" || m.readyState == "complete")) {
  652 + m.parentNode.removeChild(m);
  653 + if (l) {
  654 + l()
  655 + }
  656 + }
  657 + })
  658 + }
  659 + }
  660 + setTimeout(function () {
  661 + document.getElementsByTagName("head")[0].appendChild(j);
  662 + j = null
  663 + }, 1)
  664 + }
  665 + g.getTime = function (j) {
  666 + this.curTime = isNaN(j) ? new Date() : new Date(j)
  667 + }
  668 +})();