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>
