高德地图API-设置考勤范围
程序员文章站
2023-11-14 20:09:10
1 2 3 4 5 6 7 8 9 10 11 12 13 14 ... ......
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>
下一篇： ajax的定时调用每5秒调用一次