本次項目中設計到的插件有高德地圖择懂，簽到日歷插件喻喳。
需求：1.ionic項目中展示地圖，并可以定位困曙。2.日歷中顯示已簽到的標記表伦，點擊可跳轉(zhuǎn)查看簽到記錄頁面谦去。高德地圖插件包括，通過AMap.js實現(xiàn)的地圖功能蹦哼，及cordova-plugin-amap4location插件實現(xiàn)android平臺和ios平臺的定位功能鳄哭。日歷插件采用的是 Ionic Datepicker插件進行改造。
高德地圖：
1.創(chuàng)建app纲熏，并添加key妆丘，分別綁定javaScript API，android平臺赤套，ios平臺飘痛。
ionic項目中珊膜，javaScript API用于頁面中對地圖的顯示容握。定位功能由于javaScript API對定位精度不高，采用cordova插件調(diào)用原生功能實現(xiàn)车柠。
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值"網(wǎng)頁中內(nèi)容保存為AMap.js,然后再index.html中引入<script src = "js/AMap.js"></script>谈跛，即改成引入本地文件。然后即可在頁面中顯示高德地圖塑陵。代碼參考官網(wǎng)示例代碼感憾。
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慎王。然后后對插件進行優(yōu)化蚓土。
首先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锨天。
插件功能優(yōu)化：本插件返回的內(nèi)容很少，只有"省份-"+response['provinceName']+"市-"+response['cityName']+"區(qū)-"+response['districtName']+"街-"+response['roadName']);這幾個字段剃毒。很多時候需要更多的信息比如經(jīng)緯度病袄，poi信息及詳細地址全稱，因此需要對返回內(nèi)容進行修改赘阀。andorid插件修改AMap4LocationPlugin.java文件為：
ios平臺修改為：
另外需要注意益缠，ios平臺的POIName字段是在ios定位1.2之后才支持的，township基公、neighborhood幅慌、building字段已經(jīng)廢棄。
簽到日歷：
日歷插件改進之前和改進之后的顯示如下：
安裝：需要條件：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來實現(xiàn)已簽到的效果。點擊事件的跳轉(zhuǎn)則通過回調(diào)來實現(xiàn)揉抵。
