本次项目中设计到的插件有高德地图，签到日历插件。
需求：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来实现已签到的效果。点击事件的跳转则通过回调来实现。
点击事件，方法回调
日期标记
网友评论