1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{{mapdesc}}
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
暂无地址记录
48
49
50
51
52
53
54
55
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
64
65
66
67
68
69
70
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 Loading94 },95 directives: {96 TransferDom97 },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.PcGpsData172 //console.log('PcGps :', PcGps);
173 let locationInfo={174 longitude:PcGps.position.lng,175 latitude:PcGps.position.lat,176 regionName:PcGps.formattedAddress177 }178 let cityName =locationInfo.regionName179 _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.regionName187 _this.searchMap(cityName)188 _this.nowCity =locationInfo.cityName189 _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 = newAMap.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.lat232 };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.mapCenter240 _this.circleSearch = newAMap.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= newAMap.PlaceSearch({265 city:_this.nowCity266 });267 let search = this.searchValue == ''?val:this.searchValue268 if(search instanceofArray){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.mapCenter296 _this.circle = newAMap.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 = newAMap.CitySearch()317 citySearch.getLocalCity(function(status, result) {318 if (status === 'complete' && result.info === 'OK') {319 _this.nowCity =result.city320 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 =index329 _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 returnres;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 = newAMap.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 = newAMap.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 = newAMap.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 =data531 _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.offsetHeight549 let mapHeight =_this.$refs.map.$el.offsetHeight550 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
561
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 01rem;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
695
696
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
4294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
