本次项目中设计到的插件有高德地图,签到日历插件。
需求:1.ionic项目中展示地图,并可以定位。2.日历中显示已签到的标记,点击可跳转查看签到记录页面。高德地图插件包括,通过AMap.js实现的地图功能,及cordova-plugin-amap4location插件实现android平台和ios平台的定位功能。日历插件采用的是 Ionic Datepicker插件进行改造。
高德地图:
1.创建app,并添加key,分别绑定javaScript API,android平台,ios平台。
ionic项目中,javaScript API用于页面中对地图的显示。定位功能由于javaScript API对定位精度不高,采用cordova插件调用原生功能实现。
2.ionic项目中引入javascript Api,官方介绍方法:<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>,ionic引入非本地文件不支持,所以把"http://webapi.amap.com/maps?v=1.3&key=您申请的key值"网页中内容保存为AMap.js,然后再index.html中引入<script src = "js/AMap.js"></script>,即改成引入本地文件。然后即可在页面中显示高德地图。代码参考官网示例代码。
3.高德定位同时支持ios和android平台的cordova插件,高德Cordova 定位插件。由于插件作者使用的定位版本是android平台是 AMap_Location_V2.2.0,最新的是AMap_Location_V3.1.0。ios版本是1.1.0版本,最新的版本是 iOS 定位 SDK V2.2.0。由于变化较大,定位返回字段改变了很多。并且用法也有了很大的改变,所以需要在对cordova插件进行改进。插件安装好之后在plugin.xml中分别配置ios平台和android平台的key。然后后对插件进行优化。
首先android平台,下载最新sdk,再修改plugin.xml中的lib引入名称。src="src/android/AMap_Location_V3.1.0_20161027.jar"即可。ios高德定位sdk在2.0版本以后需要引入基础库,所以需要同时下载最新的AMapFoundationKit和AMapLocationKit两个framework,然后修改CDVAMap4Location.h,引入AMapFoundationKit.h和AMapLocationKit.h这两个头文件。由于配置key的方法新版apk和旧版也不同,所以修改CDVAMap4Location.m文件中的[AMapServices sharedServices].apiKey改为:[AMapLocationServices sharedServices].apiKey。
插件功能优化:本插件返回的内容很少,只有"省份-"+response['provinceName']+"市-"+response['cityName']+"区-"+response['districtName']+"街-"+response['roadName']);这几个字段。很多时候需要更多的信息比如经纬度,poi信息及详细地址全称,因此需要对返回内容进行修改。andorid插件修改AMap4LocationPlugin.java文件为:
ios平台修改为:
另外需要注意,ios平台的POIName字段是在ios定位1.2之后才支持的,township、neighborhood、building字段已经废弃。
签到日历:
日历插件改进之前和改进之后的显示如下:
安装:需要条件:node.js, npm,ionic,bower,gulp,以及git.bush命令行,然后按照提示安装。由于使用了gulp对代码文件进行压缩,所以在index.html中引入的是lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js,修改的时候,则是修改原文件,然后通过gulp进行重新压缩。
修改:gulpfile.js,在最后位置加上gulp.task('default', ['build'],function() {});
然后修改可以针对pop和modal进行,主要是ionic-datepicker.provider.js这个文件中的代码进行修改。已签到样式可以参考$scope.disabledDates= []新增$scope.markerDates= [];通过修改css结合ng-class来实现已签到的效果。点击事件的跳转则通过回调来实现。