我要评论 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>
如对本文有疑问， 点击进行留言回复！！
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论