高德地圖API-設置考勤範圍

  1 <template>
  2     <div class="page-setting-setgps">
  3         <!--head-->
  4         <div class="header" >
  5 
  6         </div>
  7         <!--tab-->
  8         <div class="tab">
  9             <group gutter="0" ref="search1">
 10                 <search :auto-fixed="false" position="fixed" v-model="searchValue" placeholder="搜索地點" @on-focus="onFocus" @on-submit="onSubmit"  ref="search"></search>
 11             </group>
 12             <group gutter="0" ref="map">
 13                 <div class="amap-wrapper"  id="imap">
 14                     <!--<el-amap ref="map"  id="imap" vid="amapDemo" :zoom="12" resizeEnable="true" :plugin="plugin" :center="mapCenter" class="amap-box" :events="events">-->
 15                         <!--<el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker" icon="resource/img/gps_mark.png" animation="AMAP_ANIMATION_DROP"></el-amap-marker>-->
 16                     <!--</el-amap>-->
 17                     <div class="panel" style="text-align: center;" v-show="!map"> 
 18                         <div class="panel-box panel-box_attend" style="height: 50vh"  @click="createMap">
 19                             <div class="panel-box_bd">
 20                                 <p class="panel-box_desc"><img src="resource/img/attend/gps2.png" class="panel-box_img" style="width: 1rem"/><br/>{{mapdesc}}</p>
 21                             </div>
 22                         </div>
 23                     </div>
 24                 </div>
 25             </group>
 26 
 27             <Loading v-show="isLoading" text="數據載入中"></Loading>
 28 
 29             <group ref="mapList" gutter="0" v-show="pois.length>0" class="mont-list group-cell-label-cls">
 30                 <cell v-for="(i,index) in pois" :key="index" :title="i.name" class="" @click.native="beforeConfirm(i,index)" >
 31                     <img v-show="showIndex == index" class="icon-del" src="resource/img/attend/[email protected]"/>
 32                 </cell>
 33             </group>
 34 
 35             <!--<group gutter="0.1rem">-->
 36                 <!--<x-button mini type="primary" @click.native="initMap">初始化地圖</x-button>-->
 37                 <!--<x-button mini type="primary" @click.native="initAmap">載入地圖</x-button>-->
 38             <!--</group>-->
 39 
 40             <!--<div id="imap" style="width: 100vw;height: 300px"></div>-->
 41 
 42                 <slot>
 43                     <div class="topTips" v-if="pois.length==0" >
 44                         <div class="panel" style="text-align: center">
 45                             <div class="panel-box panel-box_attend">
 46                                 <div class="panel-box_bd">
 47                                     <p class="panel-box_desc">暫無地址記錄</p>
 48                                 </div>
 49                             </div>
 50                         </div>
 51                     </div>
 52                 </slot>
 53             <!--<cell @click.native="showConfirmPlugin2" value="showConfirmPlugin"></cell>-->
 54             <div v-transfer-dom>
 55                 <confirm v-model="showConfirm"
 56                          class="gpsConfirm"
 57                          title="考勤範圍名稱"
 58                          ref="confirm"
 59                          @on-cancel="onCancel"
 60                          @on-confirm="onConfirm"
 61                          @on-show="onShow"
 62                          @on-hide="onHide">
 63                     <input class="mont-input" type="text" maxlength="150" placeholder="請輸入考勤範圍名稱" v-model="montName" />
 64                 </confirm>
 65             </div>
 66         </div>
 67     </div>
 68 </template>
 69 
 70 <script>
 71     import { registerHandler, notifyAppBackEvent, LocationObserverFunction} from '../../../lib/common/SnJsBridge.js';
 72     import { throttle, initTitleMenu, showToast,isPC } from '../../../lib/extend.js';
 73     import { Group, Cell, Search, Confirm, XButton,TransferDom,Loading   } from 'vux';
 74     // import SnLoading from '../../../components/baseComponents/SnLoading.vue';
 75     import Vue from 'vue'
 76     import VueAMap from 'vue-amap';
 77     Vue.use(VueAMap);
 78     window.initAmap = function () {
 79         Vue.data.map = new AMap.Map('imap', {
 80             // center: [114.424170,  30.463359],
 81             zoom: 12
 82         });
 83         Vue.data.map.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.CitySearch','AMap.Geolocation','AMap.Geocoder']);
 84     };
 85 
 86     export default {
 87         components: {
 88             Group,
 89             Cell,
 90             Search,
 91             Confirm,
 92             XButton,
 93             Loading
 94         },
 95         directives: {
 96             TransferDom
 97         },
 98         data() {
 99             return {
100                 markers: [],
101                 city:'',
102                 mapCenter:'',
103                 results: [],
104                 value: '',
105                 pois:[],
106                 searchValue:'',
107                 attenGroupInfo:'',
108                // gpsChecked:[]
109                 showConfirm:false,
110                 selectPoi:'',
111                 montName:'',
112                 map:null,
113                 mapdesc:'',
114                 nowCity:'',         //當前城市名
115                 isLoading:true, 
116                 PcGpsData:'',       //PC當前定位信息
117                 nowGps:[],          //當前定位經緯度
118                 geocoder:'',    
119                 showIndex:0,        //初始對號顯示
120                 marker:'',          //初始化marker
121                 markerSearch:'',    //搜索時marker
122                 circle:'',          //初始化圖層（圓）
123                 circleSearch:'',    //搜索時圖層（圓）
124                 circleRadius:100    //半徑 預設100
125             }
126         },
127         created() {
128             let _this = this;
129             _this.init();
130             initTitleMenu(['位置',{name:'刷新',menuId:'but_2_0',type: 2,func:function(){_this.refresh();}}]);
131         },
132         computed: {
133             gpsChecked: {
134                 get() {
135                     return this.$store.state.monetList;
136                 }
137             },
138         },
139         mounted() {
140             let _this = this;
141             _this.createMap();
142             _this.setMapListHeight()
143         },
144         methods: {
145             init(){
146                 let _this = this;
147                 _this.dataInit();
148                 notifyAppBackEvent(); //調用app，通知返回事件
149                 registerHandler('notifyAppBack', function(data){//點擊app返回事件
150                     throttle(function(){
151                         //_this.$router.goBack();//回退上一頁
152                         _this.$router.isBack = true;
153                         _this.$router.push({ name: 'setting'})
154                     }.bind(this));
155                 })
156             },
157             // 數據初始化  , 從APP獲取數據
158             dataInit: function() {
159                 let _this = this;
160                 _this.gpsChecked = _this.$store.state.monetList;
161                 if(!isPC()){
162                     _this.getLocationInfo();
163                 }
164             },
165             //獲取當前定位信息
166             getLocationInfo(){
167                 let _this = this;
168                 // 實時監聽gps信息
169                 LocationObserverFunction({observerType: 0});
170                 if(isPC()){
171                     let PcGps = _this.PcGpsData
172                     // console.log('PcGps :', PcGps);
173                     let locationInfo={
174                             longitude:PcGps.position.lng,
175                             latitude:PcGps.position.lat,
176                             regionName:PcGps.formattedAddress
177                         }
178                     let cityName = locationInfo.regionName
179                     _this.searchMap(cityName)
180                     _this.setMapCenter([locationInfo.longitude,locationInfo.latitude])
181                 }else{
182                     registerHandler('LocationNotify', function (result) {
183                         // console.log('result :', result);
184                         if (JSON.parse(result).retCode == 0) {
185                             let locationInfo = JSON.parse(result).data;
186                             let cityName = locationInfo.regionName
187                             _this.searchMap(cityName)
188                             _this.nowCity = locationInfo.cityName
189                             _this.setMapCenter([locationInfo.longitude,locationInfo.latitude]);
190                         }
191                     }.bind(this));
192                 }
193             },
194             openRouter(name){
195                 let _this = this;
196                 _this.$router.push({ name: name });
197                 //this.$router.push({ name: name, })
198             },
199             onSearchResult(pois) {
200                 console.log(pois);
201                 let _this = this
202                 let latSum = 0;
203                 let lngSum = 0;
204                 if (pois.length > 0) {
205                     this.markers = [];//清空
206                     this.map.clearMap();//清空
207                     // pois.forEach(poi,key => {
208                     //     let {lng, lat} = poi.location;
209                     //     lngSum += lng;
210                     //     latSum += lat;
211                     //     this.markers.push([poi.location.lng, poi.location.lat]);
212                     //     var marker = new AMap.Marker({
213                     //         // content:poi.name,
214                     //         position: new AMap.LngLat(poi.location.lng, poi.location.lat),
215                     //         title: 'marker'
216                     //     });
217                     //     this.map.add(marker);
218                     // });
219                     this.markers.push([pois[0].location.lng, pois[0].location.lat]);
220                     //--------搜索時，繪製marker-----------
221                          _this.markerSearch = new AMap.Marker({
222                             // content:poi.name,
223                             position: new AMap.LngLat(pois[0].location.lng, pois[0].location.lat),
224                             title: 'marker'
225                         });
226                         this.map.add(_this.markerSearch);
227                     let center = {
228                         // lng: lngSum / pois.length,
229                         // lat: latSum / pois.length,
230                         lng: pois[0].location.lng,
231                         lat: pois[0].location.lat
232                     };
233                     // console.log('this.mapCenter :', this.mapCenter);
234                     this.mapCenter = [center.lng, center.lat];//移動map中心
235                     this.map.setCenter(this.mapCenter);
236                     this.pois = pois;
237                     _this.isLoading = false
238                     //--------搜索時，繪製圖層（圓)-----------
239                     let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
240                     _this.circleSearch = new AMap.Circle({
241                         center: nowGps,
242                         radius: _this.circleRadius, //半徑
243                         borderWeight: 3,
244                         strokeColor: "rgba(0,0,0,0)", 
245                         strokeOpacity: 1,
246                         strokeWeight: 6,
247                         strokeOpacity: 0.2,
248                         fillOpacity: 0.4,
249                         strokeStyle: 'solid',
250                         strokeDasharray: [10, 10], 
251                         // 線樣式還支持 'dashed'
252                         fillColor: '#1791fc',
253                         zIndex: 50,
254                     })
255                     _this.circleSearch.setMap(_this.map)
256                     
257                 }
258 
259             },
260             //GPS事件
261             //search end
262             searchMap(val){
263                 let _this = this;
264                 let placeSearch= new AMap.PlaceSearch({
265                     city:_this.nowCity
266                 });
267                 let search = this.searchValue == ''?val:this.searchValue
268                 if(search instanceof Array){
269                     // console.log('上 :');
270                     placeSearch.searchNearBy('',search,500,function(status, result) {
271                         // console.log(status,result);
272                         if('OK'==result.info&&result.poiList.pois.length>0){
273                             _this.onSearchResult(result.poiList.pois)
274                         }else{
275                             _this.pois = [];
276                             _this.markers = [];
277                         }
278                     })
279                 }else{
280                     // console.log('下 :');
281                     placeSearch.search(search,function(status, result){
282                         // console.log(status,result);
283                         if('OK'==result.info&&result.poiList.pois.length>0){
284                             _this.onSearchResult(result.poiList.pois)
285                         }else{
286                             _this.pois = [];
287                             _this.markers = [];
288                         }
289                     })  
290                 }
291                 
292             },
293             setCircle(){
294                 let _this = this
295                 let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
296                 _this.circle = new AMap.Circle({
297                     center: nowGps,
298                     radius: _this.circleRadius, //半徑
299                     borderWeight: 3,
300                     strokeColor: "rgba(0,0,0,0)", 
301                     strokeOpacity: 1,
302                     strokeWeight: 6,
303                     strokeOpacity: 0.2,
304                     fillOpacity: 0.4,
305                     strokeStyle: 'solid',
306                     strokeDasharray: [10, 10], 
307                     // 線樣式還支持 'dashed'
308                     fillColor: '#1791fc',
309                     zIndex: 50,
310                 })
311                 _this.circle.setMap(_this.map)
312                 // _this.map.setFitView([ circle ])
313             },
314             searchCity(){
315                 let _this = this
316                 var citySearch = new AMap.CitySearch()
317                 citySearch.getLocalCity(function (status, result) {
318                     if (status === 'complete' && result.info === 'OK') {
319                         _this.nowCity = result.city
320                         console.group('1 :', 1);
321                         console.log(status,result);
322                     // 查詢成功，result即為當前所在城市信息
323                     }
324                 })
325             },
326             beforeConfirm(poi,index){
327                 let _this = this;
328                 _this.showIndex = index
329                 _this.selectPoi = poi;
330                 _this.showConfirm = true;
331                 _this.markerSearch.setPosition(new AMap.LngLat(poi.location.lng,poi.location.lat))  //選擇列表時，設置marker位置
332                 _this.map.setCenter([poi.location.lng,poi.location.lat])
333                 _this.mapCenter = [poi.location.lng,poi.location.lat]
334                 _this.circleSearch.setCenter(new AMap.LngLat(poi.location.lng,poi.location.lat))    //選擇列表時，設置圖層（圓）位置
335             },
336             onShow(){
337                 let _this = this;
338                 //_this.$refs.confirm.setInputValue(_this.selectPoi.name);
339                 _this.montName = _this.selectPoi.name;
340                 //this.$refs['confirmFocus'].focus()
341             },
342             onHide(){
343                 let _this = this;
344                 console.log('onHide :');
345             },
346             onConfirm(value){
347                 let _this = this;
348                 if(!_this.montName){
349                     showToast('請輸入考勤範圍名稱');
350                     return false;
351                 }else{
352                     //判斷是否已有該地址經緯度
353                     let gpsAddFlag = true;
354                     //校驗wifi mac是否重覆
355                     _this.gpsChecked.forEach(i=>{
356                         if(i.longitude == _this.selectPoi.location.lng.toFixed(6)*10e5&&i.dimension == _this.selectPoi.location.lat.toFixed(6)*10e5){
357                             showToast('已設置該考勤地點，請添加其他地點');
358                             gpsAddFlag = false;
359                         }
360                     });
361                     if(!!gpsAddFlag){
362                         _this.addGps(_this.selectPoi, _this.montName);
363                     }
364                 }
365 
366             },
367             addGps(poi, value){
368                 let _this = this;
369                 let newPoi = {
370                     //id:poi.id,
371                     longitude:poi.location.lng.toFixed(6)*10e5,
372                     dimension:poi.location.lat.toFixed(6)*10e5,
373                     address:poi.address,
374                     regionName:value||poi.name,
375                     radius:500
376                 };
377                 _this.gpsChecked.push(newPoi);
378                 //let monetList = _this.uniqueArray(_this.$store.state.monetList, newPoi);
379                 _this.$store.commit('updateChangeflag');
380                 _this.$store.commit('updateMonetList',  _this.gpsChecked);
381                 _this.$router.isBack = true;
382                 _this.$router.push({ name: 'setting' })
383             },
384             //搜索框事件
385             onSubmit () {
386                 let _this = this
387                 _this.$refs.search.setBlur();
388                 _this.showIndex = 0;
389                 _this.searchMap()
390                 console.log('on Submit')
391             },
392             onFocus () {
393                 let _this = this
394                 _this.searchCity();
395                 console.log('on focus')
396             },
397             onCancel () {
398                 console.log('on cancel')
399             },
400             refresh(){
401                 //該方法安卓會重新打開一個頁面，暫時不用this.$router.go(0);
402                 let _this = this;
403                 _this.pois = [];
404                 _this.markers = [];
405                 _this.searchValue = '';
406                 _this.$refs.search.setBlur();
407                 _this.dataInit();
408             },
409             //判斷已選擇的是否存在
410             uniqueArray(arr, poi){
411                 let res = [];
412                // var json = {};
413 
414                 for(var i = 0; i < arr.length; i++){
415                    if( arr[i].id == poi.id ){
416                       //已存在
417                        console.log('已存在')
418                    }else{
419                        res.push(arr[i]);
420                    }
421                 }
422                 if(arr.length == 0){
423                     res[0] = poi ;
424                 }
425                 return res;
426             },
427             //初始化設置地圖中心
428             setMapCenter(data){
429                 this.mapCenter = data;
430                 this.map.setZoomAndCenter(14, data);
431                 LocationObserverFunction({observerType: 1});
432             },
433             createMap(){
434                 let _this = this;
435                // _this.initMap();
436                 _this.clickMap();
437                 // _this.initAmap()
438                 _this.mapdesc = '';
439                 setTimeout(()=>{
440                     _this.mapdesc = '載入地圖失敗，點擊重新載入';
441                     _this.initAmap();
442                 },1500)
443             },
444             //初始化地圖 //無用
445             initMap(){
446                 VueAMap.initAMapApiLoader({
447                     key: '6dc72bbbc2824a9295b256b8330ae7ef',
448                     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.CitySearch','AMap.Geolocation','AMap.Geocoder'],
449                     v: '1.4.4'
450                 });
451             },
452             //初始化高德地圖
453             initAmap(){
454                 let _this = this;
455                 if(!_this.map){
456                     // console.log('_this.mapCenter :', _this.mapCenter);
457                     _this.map = new AMap.Map('imap', {
458                         // center: _this.mapCenter,
459                         zoom: 12
460                     });
461                     _this.map.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.CitySearch','AMap.Geolocation','AMap.Geocoder'],function(){
462                             var geolocation = new AMap.Geolocation({
463                             // 是否使用高精度定位，預設：true
464                             enableHighAccuracy: true,
465                             // 設置定位超時時間，預設：無窮大
466                             timeout: 10000,
467                             // 定位按鈕的停靠位置的偏移量，預設：Pixel(10, 20)
468                             buttonOffset: new AMap.Pixel(10, 20),
469                             //  定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false
470                             zoomToAccuracy: true,     
471                             //  定位按鈕的排放位置,  RB表示右下
472                             buttonPosition: 'RB'
473                             })
474 
475                             geolocation.getCurrentPosition()
476                             AMap.event.addListener(geolocation, 'complete', _this.onComplete)
477                             AMap.event.addListener(geolocation, 'error', _this.onError)
478                     });
479                     _this.map.on('dragstart',function(){
480                             _this.nowGps=[];
481                             let nowCenter = _this.map.getCenter()   //獲取當前坐標經緯度
482                             let nowLng = Number(nowCenter.lng);
483                             let nowlat = Number(nowCenter.lat);
484                             _this.nowGps.push(nowLng)
485                             _this.nowGps.push(nowlat)
486                             _this.getRadiusGps(_this.nowGps)        //設置預設城市，設置中心marker        
487                             _this.searchValue =''          
488                             // console.log('12121 :', 'circle之前');         
489                             _this.setCircle()                       //設置中心圖層（圓）
490                         _this.map.on('dragging',function(){
491                             _this.nowGps=[];
492                             let nowCenter = _this.map.getCenter()
493                             let nowLng = Number(nowCenter.lng);
494                             let nowlat =