本次項(xiàng)目中設(shè)計(jì)到的插件有高德地圖，簽到日歷插件。
需求：1.ionic項(xiàng)目中展示地圖，并可以定位。2.日歷中顯示已簽到的標(biāo)記，點(diǎn)擊可跳轉(zhuǎn)查看簽到記錄頁面。高德地圖插件包括，通過AMap.js實(shí)現(xiàn)的地圖功能，及cordova-plugin-amap4location插件實(shí)現(xiàn)android平臺(tái)和ios平臺(tái)的定位功能。日歷插件采用的是 Ionic Datepicker插件進(jìn)行改造。
高德地圖：
1.創(chuàng)建app，并添加key，分別綁定javaScript API，android平臺(tái)，ios平臺(tái)。
ionic項(xiàng)目中，javaScript API用于頁面中對(duì)地圖的顯示。定位功能由于javaScript API對(duì)定位精度不高，采用cordova插件調(diào)用原生功能實(shí)現(xiàn)。
2.ionic項(xiàng)目中引入javascript Api，官方介紹方法：<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"></script>，ionic引入非本地文件不支持，所以把"http://webapi.amap.com/maps?v=1.3&key=您申請(qǐng)的key值"網(wǎng)頁中內(nèi)容保存為AMap.js,然后再index.html中引入<script src = "js/AMap.js"></script>，即改成引入本地文件。然后即可在頁面中顯示高德地圖。代碼參考官網(wǎng)示例代碼。
3.高德定位同時(shí)支持ios和android平臺(tái)的cordova插件，高德Cordova 定位插件。由于插件作者使用的定位版本是android平臺(tái)是 AMap_Location_V2.2.0，最新的是AMap_Location_V3.1.0。ios版本是1.1.0版本，最新的版本是 iOS 定位 SDK V2.2.0。由于變化較大，定位返回字段改變了很多。并且用法也有了很大的改變，所以需要在對(duì)cordova插件進(jìn)行改進(jìn)。插件安裝好之后在plugin.xml中分別配置ios平臺(tái)和android平臺(tái)的key。然后后對(duì)插件進(jìn)行優(yōu)化。
首先android平臺(tái)，下載最新sdk，再修改plugin.xml中的lib引入名稱。src="src/android/AMap_Location_V3.1.0_20161027.jar"即可。ios高德定位sdk在2.0版本以后需要引入基礎(chǔ)庫，所以需要同時(shí)下載最新的AMapFoundationKit和AMapLocationKit兩個(gè)framework，然后修改CDVAMap4Location.h，引入AMapFoundationKit.h和AMapLocationKit.h這兩個(gè)頭文件。由于配置key的方法新版apk和舊版也不同，所以修改CDVAMap4Location.m文件中的[AMapServices sharedServices].apiKey改為：[AMapLocationServices sharedServices].apiKey。
插件功能優(yōu)化：本插件返回的內(nèi)容很少，只有"省份-"+response['provinceName']+"市-"+response['cityName']+"區(qū)-"+response['districtName']+"街-"+response['roadName']);這幾個(gè)字段。很多時(shí)候需要更多的信息比如經(jīng)緯度，poi信息及詳細(xì)地址全稱，因此需要對(duì)返回內(nèi)容進(jìn)行修改。andorid插件修改AMap4LocationPlugin.java文件為：
ios平臺(tái)修改為：
另外需要注意，ios平臺(tái)的POIName字段是在ios定位1.2之后才支持的，township、neighborhood、building字段已經(jīng)廢棄。
簽到日歷：
日歷插件改進(jìn)之前和改進(jìn)之后的顯示如下：
安裝：需要條件：node.js, npm，ionic，bower，gulp，以及git.bush命令行，然后按照提示安裝。由于使用了gulp對(duì)代碼文件進(jìn)行壓縮，所以在index.html中引入的是lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js，修改的時(shí)候，則是修改原文件，然后通過gulp進(jìn)行重新壓縮。
修改：gulpfile.js，在最后位置加上gulp.task('default', ['build'],function() {});
然后修改可以針對(duì)pop和modal進(jìn)行，主要是ionic-datepicker.provider.js這個(gè)文件中的代碼進(jìn)行修改。已簽到樣式可以參考$scope.disabledDates= []新增$scope.markerDates= [];通過修改css結(jié)合ng-class來實(shí)現(xiàn)已簽到的效果。點(diǎn)擊事件的跳轉(zhuǎn)則通過回調(diào)來實(shí)現(xiàn)。
