高德地图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/icon_common_select@2x.png"/>
 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 = Number(nowCenter.lat);
495                             _this.nowGps.push(nowLng)
496                             _this.nowGps.push(nowlat)
497                             // console.log('_this.marker.getPosition() :', _this.marker.getPosition());
498                             _this.marker.setPosition(new AMap.LngLat(nowLng,nowlat))    //使marker跟随,推拽移动
499                             _this.circle.setCenter(new AMap.LngLat(nowLng,nowlat))      //使图层(圆)跟随,拖拽移动
500                             // console.log('_this.nowGps :', _this.nowGps);
501                         })
502                     })
503                     _this.map.on('dragend',function () {
504                         _this.showIndex = 0;
505                         _this.searchMap(_this.nowGps)   //拖拽结束 搜索当前坐标点信息
506                 })
507                 }
508             },
509             //设置默认城市,设置中心marker    
510             getRadiusGps(val){
511                 let _this =this;
512                 _this.geocoder = new AMap.Geocoder({
513                     city: _this.nowCity, //城市设为北京,默认:“全国”
514                     radius: 500 //范围,默认:500
515                 });
516                 _this.markers = [];//清空
517                 _this.map.clearMap();//清空
518                 _this.markers.push(val);
519                 _this.marker = new AMap.Marker({
520                     // content:poi.name,
521                     position: new AMap.LngLat(val[0],val[1]),
522                     title: 'marker'
523                 });
524                 _this.map.add(_this.marker);
525             },
526             //PC获取当前坐标经纬度,成功时
527             onComplete(data){
528                 // console.log('1data :', data);
529                 let _this = this 
530                 _this.PcGpsData = data
531                 _this.getLocationInfo()
532             },
533             //PC获取当前坐标经纬度,失败时
534             onError(err){
535                 console.log('1err :', err);
536             },
537             //初始化地图
538             clickMap(){
539                 var url = '//webapi.amap.com/maps?v=1.4.6&key=6dc72bbbc2824a9295b256b8330ae7ef&callback=initAmap';
540                 var jsapi = document.createElement('script');
541                 jsapi.charset = 'utf-8';
542                 jsapi.src = url;
543                 document.head.appendChild(jsapi);
544             },
545             //动态设置列表高度
546             setMapListHeight(){
547                 let _this = this
548                 let searchHeight = _this.$refs.search1.$el.offsetHeight
549                 let mapHeight = _this.$refs.map.$el.offsetHeight
550                 let Height = searchHeight+mapHeight+'px'
551                 _this.$refs.mapList.$el.style.height =` calc(100vh - ${Height})`;
552             }
553         },
554         watch:{
555             PcGpsData(newValue,oldValue){
556                 
557             }
558         }
559     }
560 </script>
561 <style scoped lang="less">
562     @import '~components/style/common.less';
563     .header{
564         border-top:0;
565 
566     }
567     .tab{
568         //background: @color-white;
569         overflow: hidden;
570         .amap-wrapper {
571             width: 100%;
572             height: 50vh;
573         }
574         .mont-list{
575             overflow-y: scroll;
576             height:50vh;
577         }
578         .mont-input{
579             font-size: 1.2rem;
580             padding: .5rem;
581             width: 85%;
582             box-sizing: content-box;
583             background: transparent;
584             border: 1px solid #e2e3e4;
585             border-radius: 5px;
586         }
587         .panel{
588             font-size: 1rem;
589             .panel-box {
590                 padding: 15px;
591                 position: relative;
592             }
593             .panel-box_attend {
594                 display: flex;
595                 align-items: center;
596                 .panel-box_hd {
597                     margin-right: .8em;
598                     width: 60px;
599                     height: 60px;
600                     line-height: 60px;
601                     text-align: center;
602                 }
603                 .panel-box_bd {
604                     flex: 1;
605                     min-width: 0;
606                 }
607                 .panel-box_img {
608                     width: 100%;
609                     max-height: 100%;
610                     vertical-align: top;
611                     border-radius: .4rem;
612                 }
613                 .panel-box_title {
614                     font-weight: 400;
615                     width: auto;
616                     overflow: hidden;
617                     text-overflow: ellipsis;
618                     white-space: nowrap;
619                     word-wrap: normal;
620                     word-wrap: break-word;
621                     word-break: break-all;
622                 }
623                 .panel-box_day{
624                     text-align: right;
625                     margin-right: .32rem;
626                     color:@color-blue;
627                 }
628             }
629             .panel-box_desc {
630                 color: #999999;
631                 font-size: 13px;
632                 line-height: 1.2;
633                 overflow: hidden;
634                 text-overflow: ellipsis;
635                 display: -webkit-box;
636                 -webkit-box-orient: vertical;
637                 -webkit-line-clamp: 2;
638             }
639             .panel-box_time{
640                 flex: 1;
641                 -webkit-flex: 1;
642                 display: -webkit-box;
643                 display: -webkit-flex;
644                 display: flex;
645 
646             }
647             .box_time {
648                 padding-top: 0.2rem;
649             }
650             .box_icon {
651                 /*position: absolute;*/
652                 /*right: 0.2rem;*/
653                 /*top: 0.45rem;*/
654                 /*text-align: right;*/
655                 /*width: 0.4rem;*/
656             }
657             .box_icon_img {
658                 width: 0.6rem;
659             }
660             .set-tips{
661                 position: relative;
662                 display: flex;
663                 align-items: center;
664                 padding: 15px 0;
665                 color: @color-blue;
666                 label {
667                     /*width: 2rem;*/
668                     height: 2rem;
669                     line-height: 2.5rem;
670                     margin: 0 .5rem 0 1rem;
671                     display: block;
672                     word-wrap: break-word;
673                     word-break: break-all;
674                     img{
675                         width: 1.3rem;
676                     }
677                 }
678             }
679         }
680         .bdtop{
681             border-top: 1px solid #dddddd;
682         }
683         .icon-del{
684             width: 1rem;
685         }
686         .mgbtm{
687             margin-bottom: .5rem;
688         }
689     }
690     .list{
691         margin-top: 0.32rem;
692         padding-bottom: 3.5rem;
693     }
694 </style>
695 
696 <style lang="less">
697     div .weui-dialog__btn_primary {
698         color: #478aee;
699     }
700     .page-setting-setgps {
701        div .weui-cell {
702            padding: 14px 15px;
703            border-bottom: 1px solid #D1D1D1;
704            &:before {
705                 border-top: 0;
706             }
707         }
708         .weui-search-bar__form {
709             font-size: 22px;
710         }
711        .weui-search-bar__box .weui-icon-search{
712            line-height: 32px;
713        }
714       .weui-search-bar__box .weui-search-bar__input {
715           padding: 0;
716       }
717       
718     }
719 </style>
  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/icon_common_select@2x.png"/>
 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 = Number(nowCenter.lat);
495                             _this.nowGps.push(nowLng)
496                             _this.nowGps.push(nowlat)
497                             // console.log('_this.marker.getPosition() :', _this.marker.getPosition());
498                             _this.marker.setPosition(new AMap.LngLat(nowLng,nowlat))    //使marker跟随,推拽移动
499                             _this.circle.setCenter(new AMap.LngLat(nowLng,nowlat))      //使图层(圆)跟随,拖拽移动
500                             // console.log('_this.nowGps :', _this.nowGps);
501                         })
502                     })
503                     _this.map.on('dragend',function () {
504                         _this.showIndex = 0;
505                         _this.searchMap(_this.nowGps)   //拖拽结束 搜索当前坐标点信息
506                 })
507                 }
508             },
509             //设置默认城市,设置中心marker    
510             getRadiusGps(val){
511                 let _this =this;
512                 _this.geocoder = new AMap.Geocoder({
513                     city: _this.nowCity, //城市设为北京,默认:“全国”
514                     radius: 500 //范围,默认:500
515                 });
516                 _this.markers = [];//清空
517                 _this.map.clearMap();//清空
518                 _this.markers.push(val);
519                 _this.marker = new AMap.Marker({
520                     // content:poi.name,
521                     position: new AMap.LngLat(val[0],val[1]),
522                     title: 'marker'
523                 });
524                 _this.map.add(_this.marker);
525             },
526             //PC获取当前坐标经纬度,成功时
527             onComplete(data){
528                 // console.log('1data :', data);
529                 let _this = this 
530                 _this.PcGpsData = data
531                 _this.getLocationInfo()
532             },
533             //PC获取当前坐标经纬度,失败时
534             onError(err){
535                 console.log('1err :', err);
536             },
537             //初始化地图
538             clickMap(){
539                 var url = '//webapi.amap.com/maps?v=1.4.6&key=6dc72bbbc2824a9295b256b8330ae7ef&callback=initAmap';
540                 var jsapi = document.createElement('script');
541                 jsapi.charset = 'utf-8';
542                 jsapi.src = url;
543                 document.head.appendChild(jsapi);
544             },
545             //动态设置列表高度
546             setMapListHeight(){
547                 let _this = this
548                 let searchHeight = _this.$refs.search1.$el.offsetHeight
549                 let mapHeight = _this.$refs.map.$el.offsetHeight
550                 let Height = searchHeight+mapHeight+'px'
551                 _this.$refs.mapList.$el.style.height =` calc(100vh - ${Height})`;
552             }
553         },
554         watch:{
555             PcGpsData(newValue,oldValue){
556                 
557             }
558         }
559     }
560 </script>
561 <style scoped lang="less">
562     @import '~components/style/common.less';
563     .header{
564         border-top:0;
565 
566     }
567     .tab{
568         //background: @color-white;
569         overflow: hidden;
570         .amap-wrapper {
571             width: 100%;
572             height: 50vh;
573         }
574         .mont-list{
575             overflow-y: scroll;
576             height:50vh;
577         }
578         .mont-input{
579             font-size: 1.2rem;
580             padding: .5rem;
581             width: 85%;
582             box-sizing: content-box;
583             background: transparent;
584             border: 1px solid #e2e3e4;
585             border-radius: 5px;
586         }
587         .panel{
588             font-size: 1rem;
589             .panel-box {
590                 padding: 15px;
591                 position: relative;
592             }
593             .panel-box_attend {
594                 display: flex;
595                 align-items: center;
596                 .panel-box_hd {
597                     margin-right: .8em;
598                     width: 60px;
599                     height: 60px;
600                     line-height: 60px;
601                     text-align: center;
602                 }
603                 .panel-box_bd {
604                     flex: 1;
605                     min-width: 0;
606                 }
607                 .panel-box_img {
608                     width: 100%;
609                     max-height: 100%;
610                     vertical-align: top;
611                     border-radius: .4rem;
612                 }
613                 .panel-box_title {
614                     font-weight: 400;
615                     width: auto;
616                     overflow: hidden;
617                     text-overflow: ellipsis;
618                     white-space: nowrap;
619                     word-wrap: normal;
620                     word-wrap: break-word;
621                     word-break: break-all;
622                 }
623                 .panel-box_day{
624                     text-align: right;
625                     margin-right: .32rem;
626                     color:@color-blue;
627                 }
628             }
629             .panel-box_desc {
630                 color: #999999;
631                 font-size: 13px;
632                 line-height: 1.2;
633                 overflow: hidden;
634                 text-overflow: ellipsis;
635                 display: -webkit-box;
636                 -webkit-box-orient: vertical;
637                 -webkit-line-clamp: 2;
638             }
639             .panel-box_time{
640                 flex: 1;
641                 -webkit-flex: 1;
642                 display: -webkit-box;
643                 display: -webkit-flex;
644                 display: flex;
645 
646             }
647             .box_time {
648                 padding-top: 0.2rem;
649             }
650             .box_icon {
651                 /*position: absolute;*/
652                 /*right: 0.2rem;*/
653                 /*top: 0.45rem;*/
654                 /*text-align: right;*/
655                 /*width: 0.4rem;*/
656             }
657             .box_icon_img {
658                 width: 0.6rem;
659             }
660             .set-tips{
661                 position: relative;
662                 display: flex;
663                 align-items: center;
664                 padding: 15px 0;
665                 color: @color-blue;
666                 label {
667                     /*width: 2rem;*/
668                     height: 2rem;
669                     line-height: 2.5rem;
670                     margin: 0 .5rem 0 1rem;
671                     display: block;
672                     word-wrap: break-word;
673                     word-break: break-all;
674                     img{
675                         width: 1.3rem;
676                     }
677                 }
678             }
679         }
680         .bdtop{
681             border-top: 1px solid #dddddd;
682         }
683         .icon-del{
684             width: 1rem;
685         }
686         .mgbtm{
687             margin-bottom: .5rem;
688         }
689     }
690     .list{
691         margin-top: 0.32rem;
692         padding-bottom: 3.5rem;
693     }
694 </style>
695 
696 <style lang="less">
697     div .weui-dialog__btn_primary {
698         color: #478aee;
699     }
700     .page-setting-setgps {
701        div .weui-cell {
702            padding: 14px 15px;
703            border-bottom: 1px solid #D1D1D1;
704            &:before {
705                 border-top: 0;
706             }
707         }
708         .weui-search-bar__form {
709             font-size: 22px;
710         }
711        .weui-search-bar__box .weui-icon-search{
712            line-height: 32px;
713        }
714       .weui-search-bar__box .weui-search-bar__input {
715           padding: 0;
716       }
717       
718     }
719 </style>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15for 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30for 31 32 33 34 35 36 37 38 39 40 41 42 43if 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71;
72;
73;
74// import SnLoading from ‘../../../components/baseComponents/SnLoading.vue’; 75 76;
77 Vue.use(VueAMap);
78function () {
79new, {
80// center: [114.424170, 30.463359], 81 82 });
83]);
84 };
85 86default {
87 components: {
88 Group,
89 Cell,
90 Search,
91 Confirm,
92 XButton,
93 Loading
94 },
95 directives: {
96 TransferDom
97 },
98 data() {
99return {
100 markers: [],
101,
102,
103 results: [],
104,
105 pois:[],
106,
107,
108// gpsChecked:[]109false,
110,
111,
112null,
113,
114//当前城市名115true,
116//PC当前定位信息117//当前定位经纬度118,
119//初始对号显示120//初始化marker121//搜索时marker122//初始化图层(圆)123//搜索时图层(圆)124//半径 默认100125 }
126 },
127 created() {
128this;
129 _this.init();
130function(){_this.refresh();}}]);
131 },
132 computed: {
133 gpsChecked: {
134 get() {
135returnthis.$store.state.monetList;
136 }
137 },
138 },
139 mounted() {
140this;
141 _this.createMap();
142 _this.setMapListHeight()
143 },
144 methods: {
145 init(){
146this;
147 _this.dataInit();
148//调用app,通知返回事件149function//点击app返回事件150function(){
151//_this.$router.goBack();//回退上一页152true;
153})
154this));
155 })
156 },
157// 数据初始化 , 从APP获取数据158function() {
159this;
160 _this.$store.state.monetList;
161ifisPC()){
162 _this.getLocationInfo();
163 }
164 },
165//获取当前定位信息166 getLocationInfo(){
167this;
168// 实时监听gps信息169});
170if(isPC()){
171 _this.PcGpsData
172// console.log(‘PcGps :’, PcGps);173{
174 longitude:PcGps.position.lng,
175 latitude:PcGps.position.lat,
176 regionName:PcGps.formattedAddress
177 }
178 locationInfo.regionName
179 _this.searchMap(cityName)
180 _this.setMapCenter([locationInfo.longitude,locationInfo.latitude])
181else{
182function (result) {
183// console.log(‘result :’, result);184if) {
185 JSON.parse(result).data;
186 locationInfo.regionName
187 _this.searchMap(cityName)
188 locationInfo.cityName
189 _this.setMapCenter([locationInfo.longitude,locationInfo.latitude]);
190 }
191this));
192 }
193 },
194 openRouter(name){
195this;
196 _this.$router.push({ name: name });
197//this.$router.push({ name: name, })198 },
199 onSearchResult(pois) {
200 console.log(pois);
201this202;
203;
204if) {
205this//清空206this//清空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// });219this].location.lat]);
220//——–搜索时,绘制marker———–221new AMap.Marker({
222// content:poi.name,223new].location.lat),
224225 });
226this.map.add(_this.markerSearch);
227 {
228// lng: lngSum / pois.length,229// lat: latSum / pois.length,230].location.lng,
231].location.lat
232 };
233// console.log(‘this.mapCenter :’, this.mapCenter);234this//移动map中心235thisthis.mapCenter);
236this pois;
237false238//——–搜索时,绘制图层(圆)———–239]:_this.mapCenter
240new AMap.Circle({
241 center: nowGps,
242//半径243,
244,
245,
246,
247,
248,
249,
250],
251// 线样式还支持 ‘dashed’252,
253,
254 })
255 _this.circleSearch.setMap(_this.map)
256257 }
258259 },
260//GPS事件261//search end262 searchMap(val){
263this;
264new AMap.PlaceSearch({
265 city:_this.nowCity
266 });
267thisthis.searchValue
268ifinstanceof Array){
269// console.log(‘上 :’);270function(status, result) {
271// console.log(status,result);272if){
273 _this.onSearchResult(result.poiList.pois)
274else{
275 [];
276 [];
277 }
278 })
279else{
280// console.log(‘下 :’);281function(status, result){
282// console.log(status,result);283if){
284 _this.onSearchResult(result.poiList.pois)
285else{
286 [];
287 [];
288 }
289 })
290 }
291292 },
293 setCircle(){
294this295]:_this.mapCenter
296new AMap.Circle({
297 center: nowGps,
298//半径299,
300,
301,
302,
303,
304,
305,
306],
307// 线样式还支持 ‘dashed’308,
309,
310 })
311 _this.circle.setMap(_this.map)
312// _this.map.setFitView([ circle ])313 },
314 searchCity(){
315this316varnew AMap.CitySearch()
317function (status, result) {
318if) {
319 result.city
320);
321 console.log(status,result);
322// 查询成功,result即为当前所在城市信息323 }
324 })
325 },
326 beforeConfirm(poi,index){
327this;
328 index
329 poi;
330true;
331new//选择列表时,设置marker位置332 _this.map.setCenter([poi.location.lng,poi.location.lat])
333 [poi.location.lng,poi.location.lat]
334new//选择列表时,设置图层(圆)位置335 },
336 onShow(){
337this;
338//_this.$refs.confirm.setInputValue(_this.selectPoi.name);339 _this.selectPoi.name;
340//this.$refs[‘confirmFocus’].focus()341 },
342 onHide(){
343this;
344);
345 },
346 onConfirm(value){
347this;
348if_this.montName){
349);
350returnfalse;
351else{
352//判断是否已有该地址经纬度353true;
354//校验wifi mac是否重复355{
356if){
357);
358false;
359 }
360 });
361ifgpsAddFlag){
362 _this.addGps(_this.selectPoi, _this.montName);
363 }
364 }
365366 },
367 addGps(poi, value){
368this;
369 {
370//id:poi.id,371,
372,
373 address:poi.address,
374poi.name,
375376 };
377 _this.gpsChecked.push(newPoi);
378//let monetList = _this.uniqueArray(_this.$store.state.monetList, newPoi);379);
380, _this.gpsChecked);
381true;
382 })
383 },
384//搜索框事件385 onSubmit () {
386this387 _this.$refs.search.setBlur();
388;
389 _this.searchMap()
390)
391 },
392 onFocus () {
393this394 _this.searchCity();
395)
396 },
397 onCancel () {
398)
399 },
400 refresh(){
401//该方法安卓会重新打开一个页面,暂时不用this.$router.go(0);402this;
403 [];
404 [];
405;
406 _this.$refs.search.setBlur();
407 _this.dataInit();
408 },
409//判断已选择的是否存在410 uniqueArray(arr, poi){
411 [];
412// var json = {};413414forvar){
415if poi.id ){
416//已存在417)
418else{
419 res.push(arr[i]);
420 }
421 }
422if){
423 poi ;
424 }
425return res;
426 },
427//初始化设置地图中心428 setMapCenter(data){
429this data;
430this, data);
431});
432 },
433 createMap(){
434this;
435// _this.initMap();436 _this.clickMap();
437// _this.initAmap()438;
439{
440;
441 _this.initAmap();
442)
443 },
444//初始化地图 //无用445 initMap(){
446 VueAMap.initAMapApiLoader({
447,
448],
449450 });
451 },
452//初始化高德地图453 initAmap(){
454this;
455if_this.map){
456// console.log(‘_this.mapCenter :’, _this.mapCenter);457new, {
458// center: _this.mapCenter,459460 });
461function(){
462varnew AMap.Geolocation({
463// 是否使用高精度定位,默认:true464true,
465// 设置定位超时时间,默认:无穷大466,
467// 定位按钮的停靠位置的偏移量,默认:Pixel(10, 20)468new),
469// 定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false470true,
471// 定位按钮的排放位置, RB表示右下472473 })
474475 geolocation.getCurrentPosition()
476, _this.onComplete)
477, _this.onError)
478 });
479function(){
480[];
481//获取当前坐标经纬度482 Number(nowCenter.lng);
483 Number(nowCenter.lat);
484 _this.nowGps.push(nowLng)
485 _this.nowGps.push(nowlat)
486//设置默认城市,设置中心marker 487488// console.log(‘12121 :’, ‘circle之前’); 489//设置中心图层(圆)490function(){
491[];
492 _this.map.getCenter()
493 Number(nowCenter.lng);
494 Number(nowCenter.lat);
495 _this.nowGps.push(nowLng)
496 _this.nowGps.push(nowlat)
497// console.log(‘_this.marker.getPosition() :’, _this.marker.getPosition());498new//使marker跟随,推拽移动499new//使图层(圆)跟随,拖拽移动500// console.log(‘_this.nowGps :’, _this.nowGps);501 })
502 })
503function () {
504;
505//拖拽结束 搜索当前坐标点信息506 })
507 }
508 },
509//设置默认城市,设置中心marker 510 getRadiusGps(val){
511this;
512new AMap.Geocoder({
513//城市设为北京,默认:“全国”514//范围,默认:500515 });
516//清空517//清空518 _this.markers.push(val);
519new AMap.Marker({
520// content:poi.name,521new]),
522523 });
524 _this.map.add(_this.marker);
525 },
526//PC获取当前坐标经纬度,成功时527 onComplete(data){
528// console.log(‘1data :’, data);529this530 data
531 _this.getLocationInfo()
532 },
533//PC获取当前坐标经纬度,失败时534 onError(err){
535, err);
536 },
537//初始化地图538 clickMap(){
539var;
540var);
541;
542 url;
543 document.head.appendChild(jsapi);
544 },
545//动态设置列表高度546 setMapListHeight(){
547this548 _this.$refs.search1.$el.offsetHeight
549 _this.$refs.map.$el.offsetHeight
550551 ${Height})`;
552 }
553 },
554 watch:{
555 PcGpsData(newValue,oldValue){
556557 }
558 }
559 }
560561562;
563 .header{
564;
565566 }
567 .tab{
568//background: @color-white;569 overflow: hidden;
570wrapper {
571;
572 height: 50vh;
573 }
574list{
575y: scroll;
576 height:50vh;
577 }
578input{
579.2rem;
580 padding: .5rem;
581;
582box;
583 background: transparent;
584 border: 1px solid #e2e3e4;
585radius: 5px;
586 }
587 .panel{
588size: 1rem;
589box {
590 padding: 15px;
591 position: relative;
592 }
593box_attend {
594 display: flex;
595items: center;
596box_hd {
597right: .8em;
598 width: 60px;
599 height: 60px;
600height: 60px;
601align: center;
602 }
603box_bd {
604;
605;
606 }
607box_img {
608;
609;
610align: top;
611radius: .4rem;
612 }
613box_title {
614;
615 width: auto;
616 overflow: hidden;
617overflow: ellipsis;
618space: nowrap;
619wrap: normal;
620breakword;
621breakbreakall;
622 }
623box_day{
624align: right;
625right: .32rem;
626blue;
627 }
628 }
629box_desc {
630;
631size: 13px;
632;
633 overflow: hidden;
634overflow: ellipsis;
635box;
636orient: vertical;
637;
638 }
639box_time{
640;
641;
642box;
643flex;
644 display: flex;
645646 }
647 .box_time {
648.2rem;
649 }
650 .box_icon {
651/*position: absolute;*/652/*right: 0.2rem;*/653/*top: 0.45rem;*/654/*text-align: right;*/655/*width: 0.4rem;*/656 }
657 .box_icon_img {
658.6rem;
659 }
660tips{
661 position: relative;
662 display: flex;
663items: center;
664;
665blue;
666 label {
667/*width: 2rem;*/668 height: 2rem;
669.5rem;
670 1rem;
671 display: block;
672breakword;
673breakbreakall;
674 img{
675.3rem;
676 }
677 }
678 }
679 }
680 .bdtop{
681top: 1px solid #dddddd;
682 }
683del{
684 width: 1rem;
685 }
686 .mgbtm{
687bottom: .5rem;
688 }
689 }
690 .list{
691.32rem;
692.5rem;
693 }
694695696697dialog__btn_primary {
698 color: #478aee;
699 }
700setgps {
701cell {
702 padding: 14px 15px;
703bottom: 1px solid #D1D1D1;
704:before {
705;
706 }
707 }
708bar__form {
709size: 22px;
710 }
711search{
712height: 32px;
713 }
714bar__input {
715;
716 }
717718 }
719

 

» 本文来自:前端开发者 » 《高德地图API-设置考勤范围_放手_前端开发者》
» 本文链接地址:https://www.rokub.com/73708.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!