使用 Angular8 和百度地图 api 开发《旅游清单》
前言:
本文的目的是通过一步步实现一个旅游清单项目,让大家快速入门Angular8以及百度地图API。我们将收获:
Angular8基本用法,架构
使用百度地图API实现自己的地图应用
解决调用百度地图API时的跨域问题
对localStorage进行基础封装,进行数据持久化
material UI的使用
项目简介
《旅游清单》项目的背景主要是为了让笔者更好的掌握angular8,因为之前做的项目主要是使用vue和react,作为一名合格的coder,必须博学而专一,也是因为笔者早年大学时期想要做的一个想法,可以有这样一个程序,记录自己的路途,见闻和感想。项目的首页展示的是已去过的旅游地点和路线,地图路线是通过调用百度地图api实现的,当然提供这样的api很多,大家可以根据自己的喜好去使用。其次我们可以在首页添加未来的旅游规划和预算,方便后面使用。我的大陆页面主要展示的你去过的和即将要去的路线,可以进行相关操作。
项目地址:
《旅游清单》项目架构
其中components为组件存放区,config为公共配置区,home/newMap为页面区,mock为模拟数据区,service为应用所需服务区,如http服务,存储服务,custom.modules文件为第三方组件安置区。
效果预览
添加旅游规划之后:
1.开始
首先假定你已经安装了node,没有安装请移步node官网进行安装。安装脚手架:
创建工作空间和初始应用
安装material UI
根据以上架构,建立对应目录文件
启动服务
这里cli会自动打开浏览器4200端口,并出现默认页面。
2.引入百度地图API
官方会提供不同地图功能的api地址,以下是该项目使用的地址:
如果没有ak,请移步百度地图官网申请,步骤也很简单。
至此,项目的基本准备工作已经做好了,下面让我们先聊一聊angular。
3.angular基本语法和架构
1.基本语法
和vue类似,ng的基本语法如下:
模版语法
数据指令
属性绑定
事件绑定
案例如下:
以上代码可以知道,我们用{{}}插入数据,用[属性名]绑定属性,*ngFor为循环指令,类似的*ngIf为条件判断,事件绑定用(click),我们看看组件的ts文件对应的写法:
2.基本架构
采用angular官方提供的架构图:
我们知道,一个完整的angular应该包括:
模块
组件
服务与依赖注入
路由
4. 百度地图api及跨域问题解决
我们进入百度地图官网后,去控制台创建一个应用,此时会生成对应的应用ak,如下:
本地调试时将referer写成*即可,但是我们用ng的http或者fetch去请求api接口时仍会出现跨域,在网上搜集了各种资料,都没有达到效果,我们这里使用jquery的$.getScript(url),结合jsonp回调,即可解决该问题。
所以先安装以下jquery:
解决方案如下:
1.封装http服务:
定义jsonp回调和接收数据变量:
使用:
至此,应用几个主要的突破点已经解决好了,接下来我们来开发项目的核心页面和组件。
按需引入materialUI组件:
custom.module.ts为根目录下的文件,这里我用来做存储第三方组件的位置,定义好之后在app.module.ts中引入:
BrowserAnimationsModule主要是angular为组件提供一些动效支持的模块。接下来我们看看入口页面:
app-bar,app-footer为我们定义好的页头页尾组件,如下:
scss在这里就不引入了,因为比较简单,如果需要大家可以去我的github上现在完整项目基于angular8和百度地图API开发旅游清单项目来学习。
其次,页面头部组件用到了LocationService,我们来看看这个service:
该服务主要提供访问列表,添加旅游清单,清除清单的功能,我们利用@Injectable({providedIn: 'root'})将服务注入根组件以便共享服务。其次我们使用自己封装的Storage服务来进行持久化数据存储,storage服务如下:
实现起来比较简单,这里就不多说明了。接下来我们看看首页核心功能的实现:
百度地图初始化路线图:
代码如下:
我们在ngOninit生命周期里,初始化地图数据,根据前面我们定义的list server,把hasDone为true的数据过滤出来,显示在地图上。接下来我们实现添加旅游清单的功能。2. 添加旅游清单
表单空间我们都用h5原生控件,我们使用angular提供的form模块,具体代码如下:
我们使用angular提供的FormBuilder来处理表单数据,这里需要注意,我们在提交表单的时候,需要先调用百度地图的api去生成经纬度数据,之后一起添加到清单,这样做的目的是要想画路线图,我们需要给百度地图api提供经纬度数据。还有一点,由于访问涉及到跨域,我们要定义jsonp的回调,来拿到数据,如下:
locationService的addToList方法会将数据添加到清单,并存储到storage中。如果想了解完整代码,欢迎在我的github上查看。
接下来看看我的大陆页面,其实涉及的难点不是很多,主要是根据hasDone为true或false去显示不同的样式。
代码如下:
总结
该项目是基于angular8的实战入门项目,涉及到部分高级技巧以及百度地图,jsonp跨域的知识,大家有不懂的可以相互交流,我也会定期分享一些企业中常用的核心技术。
未完善的部分: 添加清单时,如果添了不符合规范的地址或者百度地图查不到的地址,因该出现错误提示,这块会在后期优化。
好啦,文章篇幅比较多,大致项目基本完成,如果想查看实际项目效果,请移步基于angular8和百度地图API开发旅游清单项目。
最后,更多技术优质文章,技术资料,欢迎微信搜索 趣谈前端 .
版权声明: 本文为 InfoQ 作者【徐小夕】的原创文章。
原文链接:【http://xie.infoq.cn/article/8c73e3a457706136b2fecbaad】。文章转载请联系作者。
评论