前者之旅,做一点有回报的事务

后天帮地理所的一个同学做了一个有关百度地图公交路线搜索的东西,就是把各条公交路线汇总在一张图上。

怎么入前端那一个行当的

  二〇〇七年读大学,专业是数字媒体技术,学设计也学技术,时期认真做过UI设计,文章被嫌弃后很受打击,深远意识到有些力量不是努力就能赢得,所谓的『天赋』很要紧,现在改过看往日的作品着实丑爆了。

  几遍偶然的空子接触大四的师兄用Dreamweaver做网页设计,想想借使自己可以选择它来做个人博客就认为很厉害。于是在体育场馆借了一本Dreamweaver入门教程的书本自己玩着看,那时候还有配套的光碟,看视频照着案例做,居然可以做到一个网站,很简短的入门引起了本人的『兴趣』,于是买书学习,记得最早在亚马逊(亚马逊)买朱印宏写的《明白css网页布局》和《JavaScript征途》,那时候很火,然后常跑体育场馆闭关学习『基础』知识。在二〇〇九年初跟几位同学创制了布宜诺斯艾利斯启凡设计团队,边做项目边上学,蒙受不懂的就选用百度谷歌(谷歌(Google)),技术发展得越发快。那段时期网站建设的商海须要量还瞒大的,我越来越肯定那个趋势,前面也如愿走入这些行当。

[2]使用代码分析神器logger2js,搞定一切难点[百度地图api示例](那篇Blog仍旧提供了成百上千声援,然而随后他的来,他的工具怎么都用持续,倒是跟着她的思绪,分析到了数据结构,最终找到了特需的信息)

  首先感谢情封对前端圈的分神付出,能锲而不舍做好一件事确实很不便于,敬佩这份精神。2天前阅览早读课的【同说】活动陈设,我认为想法实在很好,忽然情封微信约请我参加,听到后自己是心虚的,作为一枚技术宅男,步入前端也可是4年,谈不上有很好的行事经历和学习心得分享给我们。

I.
首先是百度提供的官方demo,在其基础之上,加了有的改动,新增了输入查询框和百度Logo。复制以下代码,在地头新建一个html文件,如map_test.html,用浏览器打开即可。

在就学的长河中,蒙受难点是怎么化解的?

  在组内有个结束学业生妹子,有三次问我3D旋转动画的难题,在说完简短原理后自己想把发个例子给她参考,她不肯了,说要自己研商怎么办,我笑着给她点赞。

  学习遭受标题精晓『独立思想』去化解是一项最基础的能力,这种能力完全可以构建并形成习惯,不管是在哪个行业工作,对私有的升迁大有支持。很惋惜,我在博客或者群里见过无数刚步入前端的同室,遭逢难题就应声提问,甚至是需求提供现成的demo。

考虑后解决不了难点得以百度或谷歌,例如stackoverflow,需具备一点匈牙利(Hungary)语能力。实在解决不了再上群等方法『提问』,可以参见张鑫旭写的《怎样提问才能进阶成为前端大神》

References:

现行在研商的技巧是哪些方向?

  余果写的《全栈工程师的本人修养》这本书让自家有挺大的感动,也正在往一专多少长度的线路走,如产品、视觉、交互、后台等都足以在日常的合作中去关注和思考,然后像鬼哥说的维系『空杯』心态学习,定些安顿逐步来啊。近日技能上主要商量nodejs这块,希望后边做一些对集体有含义的工作。

II.在浏览器中,打开控制台,一般按F12就可以打开。然后输入以下命令,间接复制回车就可以。下文中的代码是查询“h45”那条公交线路的。

有关前端早读课

 图片 1

百度地图提供BusLineSearch()类举办公交路线查询,在那一个类中运用getBusLine()方法得到路线并在地形图上绘制。在测试进度中发现,这几个艺术没有艺术记录此前的新闻,也就是说每一回在取得以前都会清空上两遍询问到的路径,将时尚查询到的门径在地图上制图出来。而且,那种办法赢得的门路,只是简单的图形,保存不了地理所的不得了同学所急需的数据格式,所以那么些思路就闲置了。迎接大家对这么些思路展开补偿调换。

正文是加入前端早读课【同说】做的分享 

[1]凭借百度地图api下载公交音信(本来以为能用上,可是并不曾协助,提供一种思路)

哪些学习前端

  记得群里有人问我现在上立刻学前端还赶得及吗,种一棵树最好的日子是十年前,其次是当今,想做什么就及时去做,并坚定不移下去。

对此刚步入前端的同班来说,最重点的应当是读书『基础』知识,像CSS、JavaScript的底子原理看多三回也不会过时,最好找两本书系统的上学或者上网找教程如w3school在线教程,然后如我面前提到的找项目或者做demo去实施,将知识转化为涉世,并坚称下来,那种学习方法最简易,进步也最鲜明。

  有的同学说工作忙没有太多日子读书,其实可以挤出来,例如我平日会利用每天上班前和下班后的小运,大约有一个钟在公交或地铁上,看书或者拿起先机学习,越发是上午上班那段路上,学习功用会很高。

  咱们知道现在前端的水很深,为了化解各样事情难点,升高生产作用,技术创新越发快,那么所有急速的上学能力是你的着力竞争力之一,并不代表你每样新技巧都要学,应该根据店家的事务必要选拔适合的框架,其余的精通下,用到时再上学也不迟,更何况使用新框架的就学窍门不会太高,简单上手,那点上看,刚步入前端的新娘是特意有优势的,至于想要了然它的深沉原理,必要费用很多的造诣去学学,那一个等级你也许高达资深工程师的可观。

各类人的求学方法恐怕对自己升高很大但不合乎别人,人都是惟一的,要结成自己的生活习惯,通过实践中考虑,找到属于自己的情势。

以上基本就是这一夜晚+前几日一夜晚的干活。

关于写博客

  每个人的小时不多,写博客除了因为兴趣外,更是希望做一些对自己有回报的工作,一来可以记录工作章程和生存感悟,方便查阅和追忆,利于思考和发现自己的供不应求;二来希望团结给前端行业做点小进献,促进良性发展,对各种前端从业者都有补益。博客地址:http://peunzhang.cnblogs.com/

本来认为蛮简单的,后来试了一下,发现将一条公交路线,以及公交站点的消息寻找并出示出来,很不难完成,官方也曾经提供了demo,然而将两条或者多条路子放在一块儿浮现出来就有一对不便了。

不难介绍一下友好

  大家好,我的网名是白树,英文名是peunzhang。二〇一一年结束学业后出席腾讯财付通设计为主,二零一四年转岗到腾讯微信支付设计中央,首要承担H5的前端开发。没错,鬼哥就是自我的COO。

以上是展开编码的思路,接下去就是其实的代码。

本文微信公众号地址

【同说】白树:做一点有回报的业务

 1 <html>
 2 <head>
 3     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
 5     <style type="text/css">
 6         body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
 7         #l-map{height:300px;width:100%;}
 8         #r-result {width:100%;}
 9     </style>
10     <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WONmQMWf5T6GneZ9lkgF34hz"></script>
11     <title>公交/地铁线路查询</title>
12 </head>
13 <body>
14     <p><img src="http://map.baidu.com/img/logo-map.gif" />&nbsp;<input type="text" value="331" id="busId" onkeypress="testEnter()" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
15     <!-- <div id="l-map" style="float:left;width:600px;height:500px;border:1px solid gray" ></div>
16     <div id="r-result" style="float:left;width:300px;height:500px;font-size:13px;"></div> -->
17     <div id="l-map"></div>
18     <div id="r-result"></div>
19 </body>
20 </html>
21 <script type="text/javascript">
22     // 百度地图API功能
23     var map = new BMap.Map("l-map");            // 创建Map实例
24     map.centerAndZoom(new BMap.Point(116.404, 39.915), 12);
25     var fstLine,fstLine_1;
26 
27     var busline = new BMap.BusLineSearch(map,{
28         renderOptions:{map:map,panel:"r-result"},
29             onGetBusListComplete: function(result){
30                if(result) {
31                  fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
32                  busline.getBusLine(fstLine);
33                }
34             }
35     });
36     function busSearch(){
37         var busName = document.getElementById("busId").value;
38         busline.getBusList(busName);
39     };
40     function testEnter(){  
41     if(event.keyCode==13) {  
42         busSearch();  
43         return false;  
44         }  
45     } 
46 </script>
 1 var k = 45;
 2 function map_bus()
 3 {
 4     
 5     var busname_head = "h";
 6 
 7     var busName = busname_head + k.toString();//构造查询的公交线路名称
 8     k++;
 9     busline.getBusList(busName);//调用百度API,查询公交线路
10     setTimeout("map_lines()", 5000);//因为如果地图公交路线没有加载出来,继续执行会出错,所以需要先延时一下,等公交路线完全加载出来之后,再继续执行
11 }
12 
13 function map_lines()
14 {
15     var lines = "";
16     var bl = Instance('TANGRAM__n');
17     var amount = bl.gc.tA.length;//公交路线的总数
18 
19     for( var i = 0 ; i < amount ; i++)
20     {
21         var line_name = bl.gc.tA[i].name;//公交路线的名称,如h45路(大地-汤河口)
22 
23         lines = lines + line_name + ": ["
24 
25         bl._selectBusListItem(i);//选择第i条路线
26         var line = bl.Li;
27         for( var j = 0 ; j < line.length ; j++)
28         {
29             var station_position = line[j].point;//公交站点的GPS坐标
30             var station_name = line[j].gB;//公交站点的名称
31             lines = lines + station_name + ": [" + station_position.lat + ","+ station_position.lng + "]," ;
32         }
33         lines = lines.substr(0,lines.length-1);
34         lines = lines + "],"; 
35         lines = lines.substr(0,lines.length-1);
36     }
37     
38     document.writeln(lines);//在页面输出公交路线信息
39     setTimeout(" document.location.reload()", 2000);//等复制操作完成后,重新加载本页面,继续进行查询
40     map_bus();
41 }
42 map_bus();

既然如此上一种思路行不通,就换一种想法:获取各条公交路线的站点地理地方(GPS坐标)。所谓获取各站点的GPS坐标,就是在公交路线查询的底蕴之上,通过js函数解析获取到的信息。顾名思义,就是在早就收获到的数码的根底之上,分析其数据结构,然后将所急需的新闻,包罗公交线路的名号、站点的名号以及站点的GPS坐标,提取出来。由于时日有限,本来想将音讯提取出来之后转成json格式,然后写到本地文件中,按线路名称命名。但是试了三种常用的法子(ActiveXObject())之后,然并卵。就不得不在console中展现出来,后来想到直接的页面中document.writeln()出来,直接复制更利于一些;这样一来,就事关到两次三番查询的题材,docment.writeln()之后,原有页面数据就不设有,就不可能继续举办询问,所以需求回到原先的页面,于是就想开利用document.location,reload()函数,重新加载页面,然后继续进行查询。因为自己复制操作,要求有些时刻,所以在须求自己操作的手续前,加上set提姆eout()函数,来延时举办接下去的动作。