高德地图API-设置考勤范围

 <template>
     <div class="page-setting-setgps">
         <!--head-->
         <div class="header" >         </div>
         <!--tab-->
         <div class="tab">
             <group gutter="0" ref="search1">
                 <search :auto-fixed="false" position="fixed" v-model="searchValue" placeholder="搜索地点" @on-focus="onFocus" @on-submit="onSubmit"  ref="search"></search>
             </group>
             <group gutter="0" ref="map">
                 <div class="amap-wrapper"  id="imap">
                     <!--<el-amap ref="map"  id="imap" vid="amapDemo" :zoom="12" resizeEnable="true" :plugin="plugin" :center="mapCenter" class="amap-box" :events="events">-->
                         <!--<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>-->
                     <!--</el-amap>-->
                     <div class="panel" style="text-align: center;" v-show="!map">
                         <div class="panel-box panel-box_attend" style="height: 50vh"  @click="createMap">
                             <div class="panel-box_bd">
                                 <p class="panel-box_desc"><img src="resource/img/attend/gps2.png" class="panel-box_img" style="width: 1rem"/><br/>{{mapdesc}}</p>
                             </div>
                         </div>
                     </div>
                 </div>
             </group>             <Loading v-show="isLoading" text="数据加载中"></Loading>             <group ref="mapList" gutter="0" v-show="pois.length>0" class="mont-list group-cell-label-cls">
                 <cell v-for="(i,index) in pois" :key="index" :title="i.name" class="" @click.native="beforeConfirm(i,index)" >
                     <img v-show="showIndex == index" class="icon-del" src="resource/img/attend/icon_common_select@2x.png"/>
                 </cell>
             </group>             <!--<group gutter="0.1rem">-->
                 <!--<x-button mini type="primary" @click.native="initMap">初始化地图</x-button>-->
                 <!--<x-button mini type="primary" @click.native="initAmap">加载地图</x-button>-->
             <!--</group>-->             <!--<div id="imap" style="width: 100vw;height: 300px"></div>-->                 <slot>
                     <div class="topTips" v-if="pois.length==0" >
                         <div class="panel" style="text-align: center">
                             <div class="panel-box panel-box_attend">
                                 <div class="panel-box_bd">
                                     <p class="panel-box_desc">暂无地址记录</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </slot>
             <!--<cell @click.native="showConfirmPlugin2" value="showConfirmPlugin"></cell>-->
             <div v-transfer-dom>
                 <confirm v-model="showConfirm"
                          class="gpsConfirm"
                          title="考勤范围名称"
                          ref="confirm"
                          @on-cancel="onCancel"
                          @on-confirm="onConfirm"
                          @on-show="onShow"
                          @on-hide="onHide">
                     <input class="mont-input" type="text" maxlength="150" placeholder="请输入考勤范围名称" v-model="montName" />
                 </confirm>
             </div>
         </div>
     </div>
 </template> <script>
     import { registerHandler, notifyAppBackEvent, LocationObserverFunction} from '../../../lib/common/SnJsBridge.js';
     import { throttle, initTitleMenu, showToast,isPC } from '../../../lib/extend.js';
     import { Group, Cell, Search, Confirm, XButton,TransferDom,Loading   } from 'vux';
     // import SnLoading from '../../../components/baseComponents/SnLoading.vue';
     import Vue from 'vue'
     import VueAMap from 'vue-amap';
     Vue.use(VueAMap);
     window.initAmap = function () {
         Vue.data.map = new AMap.Map('imap', {
             // center: [114.424170,  30.463359],
             zoom: 12
         });
         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']);
     };     export default {
         components: {
             Group,
             Cell,
             Search,
             Confirm,
             XButton,
             Loading
         },
         directives: {
             TransferDom
         },
         data() {
             return {
                 markers: [],
                 city:'',
                 mapCenter:'',
                 results: [],
                 value: '',
                 pois:[],
                 searchValue:'',
                 attenGroupInfo:'',
                // gpsChecked:[]
                 showConfirm:false,
                 selectPoi:'',
                 montName:'',
                 map:null,
                 mapdesc:'',
                 nowCity:'',         //当前城市名
                 isLoading:true,
                 PcGpsData:'',       //PC当前定位信息
                 nowGps:[],          //当前定位经纬度
                 geocoder:'',
                 showIndex:0,        //初始对号显示
                 marker:'',          //初始化marker
                 markerSearch:'',    //搜索时marker
                 circle:'',          //初始化图层（圆）
                 circleSearch:'',    //搜索时图层（圆）
                 circleRadius:100    //半径 默认100
             }
         },
         created() {
             let _this = this;
             _this.init();
             initTitleMenu(['位置',{name:'刷新',menuId:'but_2_0',type: 2,func:function(){_this.refresh();}}]);
         },
         computed: {
             gpsChecked: {
                 get() {
                     return this.$store.state.monetList;
                 }
             },
         },
         mounted() {
             let _this = this;
             _this.createMap();
             _this.setMapListHeight()
         },
         methods: {
             init(){
                 let _this = this;
                 _this.dataInit();
                 notifyAppBackEvent(); //调用app，通知返回事件
                 registerHandler('notifyAppBack', function(data){//点击app返回事件
                     throttle(function(){
                         //_this.$router.goBack();//回退上一页
                         _this.$router.isBack = true;
                         _this.$router.push({ name: 'setting'})
                     }.bind(this));
                 })
             },
             // 数据初始化  , 从APP获取数据
             dataInit: function() {
                 let _this = this;
                 _this.gpsChecked = _this.$store.state.monetList;
                 if(!isPC()){
                     _this.getLocationInfo();
                 }
             },
             //获取当前定位信息
             getLocationInfo(){
                 let _this = this;
                 // 实时监听gps信息
                 LocationObserverFunction({observerType: 0});
                 if(isPC()){
                     let PcGps = _this.PcGpsData
                     // console.log('PcGps :', PcGps);
                     let locationInfo={
                             longitude:PcGps.position.lng,
                             latitude:PcGps.position.lat,
                             regionName:PcGps.formattedAddress
                         }
                     let cityName = locationInfo.regionName
                     _this.searchMap(cityName)
                     _this.setMapCenter([locationInfo.longitude,locationInfo.latitude])
                 }else{
                     registerHandler('LocationNotify', function (result) {
                         // console.log('result :', result);
                         if (JSON.parse(result).retCode == 0) {
                             let locationInfo = JSON.parse(result).data;
                             let cityName = locationInfo.regionName
                             _this.searchMap(cityName)
                             _this.nowCity = locationInfo.cityName
                             _this.setMapCenter([locationInfo.longitude,locationInfo.latitude]);
                         }
                     }.bind(this));
                 }
             },
             openRouter(name){
                 let _this = this;
                 _this.$router.push({ name: name });
                 //this.$router.push({ name: name, })
             },
             onSearchResult(pois) {
                 console.log(pois);
                 let _this = this
                 let latSum = 0;
                 let lngSum = 0;
                 if (pois.length > 0) {
                     this.markers = [];//清空
                     this.map.clearMap();//清空
                     // pois.forEach(poi,key => {
                     //     let {lng, lat} = poi.location;
                     //     lngSum += lng;
                     //     latSum += lat;
                     //     this.markers.push([poi.location.lng, poi.location.lat]);
                     //     var marker = new AMap.Marker({
                     //         // content:poi.name,
                     //         position: new AMap.LngLat(poi.location.lng, poi.location.lat),
                     //         title: 'marker'
                     //     });
                     //     this.map.add(marker);
                     // });
                     this.markers.push([pois[0].location.lng, pois[0].location.lat]);
                     //--------搜索时，绘制marker-----------
                          _this.markerSearch = new AMap.Marker({
                             // content:poi.name,
                             position: new AMap.LngLat(pois[0].location.lng, pois[0].location.lat),
                             title: 'marker'
                         });
                         this.map.add(_this.markerSearch);
                     let center = {
                         // lng: lngSum / pois.length,
                         // lat: latSum / pois.length,
                         lng: pois[0].location.lng,
                         lat: pois[0].location.lat
                     };
                     // console.log('this.mapCenter :', this.mapCenter);
                     this.mapCenter = [center.lng, center.lat];//移动map中心
                     this.map.setCenter(this.mapCenter);
                     this.pois = pois;
                     _this.isLoading = false
                     //--------搜索时，绘制图层（圆)-----------
                     let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
                     _this.circleSearch = new AMap.Circle({
                         center: nowGps,
                         radius: _this.circleRadius, //半径
                         borderWeight: 3,
                         strokeColor: "rgba(0,0,0,0)",
                         strokeOpacity: 1,
                         strokeWeight: 6,
                         strokeOpacity: 0.2,
                         fillOpacity: 0.4,
                         strokeStyle: 'solid',
                         strokeDasharray: [10, 10],
                         // 线样式还支持 'dashed'
                         fillColor: '#1791fc',
                         zIndex: 50,
                     })
                     _this.circleSearch.setMap(_this.map)                 }             },
             //GPS事件
             //search end
             searchMap(val){
                 let _this = this;
                 let placeSearch= new AMap.PlaceSearch({
                     city:_this.nowCity
                 });
                 let search = this.searchValue == ''?val:this.searchValue
                 if(search instanceof Array){
                     // console.log('上 :');
                     placeSearch.searchNearBy('',search,500,function(status, result) {
                         // console.log(status,result);
                         if('OK'==result.info&&result.poiList.pois.length>0){
                             _this.onSearchResult(result.poiList.pois)
                         }else{
                             _this.pois = [];
                             _this.markers = [];
                         }
                     })
                 }else{
                     // console.log('下 :');
                     placeSearch.search(search,function(status, result){
                         // console.log(status,result);
                         if('OK'==result.info&&result.poiList.pois.length>0){
                             _this.onSearchResult(result.poiList.pois)
                         }else{
                             _this.pois = [];
                             _this.markers = [];
                         }
                     })
                 }             },
             setCircle(){
                 let _this = this
                 let nowGps = _this.mapCenter.length==0? [114.424529, 30.463046]:_this.mapCenter
                 _this.circle = new AMap.Circle({
                     center: nowGps,
                     radius: _this.circleRadius, //半径
                     borderWeight: 3,
                     strokeColor: "rgba(0,0,0,0)",
                     strokeOpacity: 1,
                     strokeWeight: 6,
                     strokeOpacity: 0.2,
                     fillOpacity: 0.4,
                     strokeStyle: 'solid',
                     strokeDasharray: [10, 10],
                     // 线样式还支持 'dashed'
                     fillColor: '#1791fc',
                     zIndex: 50,
                 })
                 _this.circle.setMap(_this.map)
                 // _this.map.setFitView([ circle ])
             },
             searchCity(){
                 let _this = this
                 var citySearch = new AMap.CitySearch()
                 citySearch.getLocalCity(function (status, result) {
                     if (status === 'complete' && result.info === 'OK') {
                         _this.nowCity = result.city
                         console.group('1 :', 1);
                         console.log(status,result);
                     // 查询成功，result即为当前所在城市信息
                     }
                 })
             },
             beforeConfirm(poi,index){
                 let _this = this;
                 _this.showIndex = index
                 _this.selectPoi = poi;
                 _this.showConfirm = true;
                 _this.markerSearch.setPosition(new AMap.LngLat(poi.location.lng,poi.location.lat))  //选择列表时，设置marker位置
                 _this.map.setCenter([poi.location.lng,poi.location.lat])
                 _this.mapCenter = [poi.location.lng,poi.location.lat]
                 _this.circleSearch.setCenter(new AMap.LngLat(poi.location.lng,poi.location.lat))    //选择列表时，设置图层（圆）位置
             },
             onShow(){
                 let _this = this;
                 //_this.$refs.confirm.setInputValue(_this.selectPoi.name);
                 _this.montName = _this.selectPoi.name;
                 //this.$refs['confirmFocus'].focus()
             },
             onHide(){
                 let _this = this;
                 console.log('onHide :');
             },
             onConfirm(value){
                 let _this = this;
                 if(!_this.montName){
                     showToast('请输入考勤范围名称');
                     return false;
                 }else{
                     //判断是否已有该地址经纬度
                     let gpsAddFlag = true;
                     //校验wifi mac是否重复
                     _this.gpsChecked.forEach(i=>{
                         if(i.longitude == _this.selectPoi.location.lng.toFixed(6)*10e5&&i.dimension == _this.selectPoi.location.lat.toFixed(6)*10e5){
                             showToast('已设置该考勤地点，请添加其他地点');
                             gpsAddFlag = false;
                         }
                     });
                     if(!!gpsAddFlag){
                         _this.addGps(_this.selectPoi, _this.montName);
                     }
                 }             },
             addGps(poi, value){
                 let _this = this;
                 let newPoi = {
                     //id:poi.id,
                     longitude:poi.location.lng.toFixed(6)*10e5,
                     dimension:poi.location.lat.toFixed(6)*10e5,
                     address:poi.address,
                     regionName:value||poi.name,
                     radius:500
                 };
                 _this.gpsChecked.push(newPoi);
                 //let monetList = _this.uniqueArray(_this.$store.state.monetList, newPoi);
                 _this.$store.commit('updateChangeflag');
                 _this.$store.commit('updateMonetList',  _this.gpsChecked);
                 _this.$router.isBack = true;
                 _this.$router.push({ name: 'setting' })
             },
             //搜索框事件
             onSubmit () {
                 let _this = this
                 _this.$refs.search.setBlur();
                 _this.showIndex = 0;
                 _this.searchMap()
                 console.log('on Submit')
             },
             onFocus () {
                 let _this = this
                 _this.searchCity();
                 console.log('on focus')
             },
             onCancel () {
                 console.log('on cancel')
             },
             refresh(){
                 //该方法安卓会重新打开一个页面，暂时不用this.$router.go(0);
                 let _this = this;
                 _this.pois = [];
                 _this.markers = [];
                 _this.searchValue = '';
                 _this.$refs.search.setBlur();
                 _this.dataInit();
             },
             //判断已选择的是否存在
             uniqueArray(arr, poi){
                 let res = [];
                // var json = {};                 for(var i = 0; i < arr.length; i++){
                    if( arr[i].id == poi.id ){
                       //已存在
                        console.log('已存在')
                    }else{
                        res.push(arr[i]);
                    }
                 }
                 if(arr.length == 0){
                     res[0] = poi ;
                 }
                 return res;
             },
             //初始化设置地图中心
             setMapCenter(data){
                 this.mapCenter = data;
                 this.map.setZoomAndCenter(14, data);
                 LocationObserverFunction({observerType: 1});
             },
             createMap(){
                 let _this = this;
                // _this.initMap();
                 _this.clickMap();
                 // _this.initAmap()
                 _this.mapdesc = '';
                 setTimeout(()=>{
                     _this.mapdesc = '载入地图失败，点击重新载入';
                     _this.initAmap();
                 },1500)
             },
             //初始化地图 //无用
             initMap(){
                 VueAMap.initAMapApiLoader({
                     key: '6dc72bbbc2824a9295b256b8330ae7ef',
                     plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','AMap.CitySearch','AMap.Geolocation','AMap.Geocoder'],
                     v: '1.4.4'
                 });
             },
             //初始化高德地图
             initAmap(){
                 let _this = this;
                 if(!_this.map){
                     // console.log('_this.mapCenter :', _this.mapCenter);
                     _this.map = new AMap.Map('imap', {
                         // center: _this.mapCenter,
                         zoom: 12
                     });
                     _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(){
                             var geolocation = new AMap.Geolocation({
                             // 是否使用高精度定位，默认：true
                             enableHighAccuracy: true,
                             // 设置定位超时时间，默认：无穷大
                             timeout: 10000,
                             // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                             buttonOffset: new AMap.Pixel(10, 20),
                             //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                             zoomToAccuracy: true,
                             //  定位按钮的排放位置,  RB表示右下
                             buttonPosition: 'RB'
                             })                             geolocation.getCurrentPosition()
                             AMap.event.addListener(geolocation, 'complete', _this.onComplete)
                             AMap.event.addListener(geolocation, 'error', _this.onError)
                     });
                     _this.map.on('dragstart',function(){
                             _this.nowGps=[];
                             let nowCenter = _this.map.getCenter()   //获取当前坐标经纬度
                             let nowLng = Number(nowCenter.lng);
                             let nowlat = Number(nowCenter.lat);
                             _this.nowGps.push(nowLng)
                             _this.nowGps.push(nowlat)
                             _this.getRadiusGps(_this.nowGps)        //设置默认城市，设置中心marker
                             _this.searchValue =''
                             // console.log('12121 :', 'circle之前');
                             _this.setCircle()                       //设置中心图层（圆）
                         _this.map.on('dragging',function(){
                             _this.nowGps=[];
                             let nowCenter = _this.map.getCenter()
                             let nowLng = Number(nowCenter.lng);
                             let nowlat = Number(nowCenter.lat);
                             _this.nowGps.push(nowLng)
                             _this.nowGps.push(nowlat)
                             // console.log('_this.marker.getPosition() :', _this.marker.getPosition());
                             _this.marker.setPosition(new AMap.LngLat(nowLng,nowlat))    //使marker跟随，推拽移动
                             _this.circle.setCenter(new AMap.LngLat(nowLng,nowlat))      //使图层（圆）跟随，拖拽移动
                             // console.log('_this.nowGps :', _this.nowGps);
                         })
                     })
                     _this.map.on('dragend',function () {
                         _this.showIndex = 0;
                         _this.searchMap(_this.nowGps)   //拖拽结束 搜索当前坐标点信息
                 })
                 }
             },
             //设置默认城市，设置中心marker
             getRadiusGps(val){
                 let _this =this;
                 _this.geocoder = new AMap.Geocoder({
                     city: _this.nowCity, //城市设为北京，默认：“全国”
                     radius: 500 //范围，默认：500
                 });
                 _this.markers = [];//清空
                 _this.map.clearMap();//清空
                 _this.markers.push(val);
                 _this.marker = new AMap.Marker({
                     // content:poi.name,
                     position: new AMap.LngLat(val[0],val[1]),
                     title: 'marker'
                 });
                 _this.map.add(_this.marker);
             },
             //PC获取当前坐标经纬度，成功时
             onComplete(data){
                 // console.log('1data :', data);
                 let _this = this
                 _this.PcGpsData = data
                 _this.getLocationInfo()
             },
             //PC获取当前坐标经纬度，失败时
             onError(err){
                 console.log('1err :', err);
             },
             //初始化地图
             clickMap(){
                 var url = '//webapi.amap.com/maps?v=1.4.6&key=6dc72bbbc2824a9295b256b8330ae7ef&callback=initAmap';
                 var jsapi = document.createElement('script');
                 jsapi.charset = 'utf-8';
                 jsapi.src = url;
                 document.head.appendChild(jsapi);
             },
             //动态设置列表高度
             setMapListHeight(){
                 let _this = this
                 let searchHeight = _this.$refs.search1.$el.offsetHeight
                 let mapHeight = _this.$refs.map.$el.offsetHeight
                 let Height = searchHeight+mapHeight+'px'
                 _this.$refs.mapList.$el.style.height =` calc(100vh - ${Height})`;
             }
         },
         watch:{
             PcGpsData(newValue,oldValue){             }
         }
     }
 </script>
 <style scoped lang="less">
     @import '~components/style/common.less';
     .header{
         border-top:0;     }
     .tab{
         //background: @color-white;
         overflow: hidden;
         .amap-wrapper {
             width: 100%;
             height: 50vh;
         }
         .mont-list{
             overflow-y: scroll;
             height:50vh;
         }
         .mont-input{
             font-size: 1.2rem;
             padding: .5rem;
             width: 85%;
             box-sizing: content-box;
             background: transparent;
             border: 1px solid #e2e3e4;
             border-radius: 5px;
         }
         .panel{
             font-size: 1rem;
             .panel-box {
                 padding: 15px;
                 position: relative;
             }
             .panel-box_attend {
                 display: flex;
                 align-items: center;
                 .panel-box_hd {
                     margin-right: .8em;
                     width: 60px;
                     height: 60px;
                     line-height: 60px;
                     text-align: center;
                 }
                 .panel-box_bd {
                     flex: 1;
                     min-width: 0;
                 }
                 .panel-box_img {
                     width: 100%;
                     max-height: 100%;
                     vertical-align: top;
                     border-radius: .4rem;
                 }
                 .panel-box_title {
                     font-weight: 400;
                     width: auto;
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
                     word-wrap: normal;
                     word-wrap: break-word;
                     word-break: break-all;
                 }
                 .panel-box_day{
                     text-align: right;
                     margin-right: .32rem;
                     color:@color-blue;
                 }
             }
             .panel-box_desc {
                 color: #999999;
                 font-size: 13px;
                 line-height: 1.2;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 display: -webkit-box;
                 -webkit-box-orient: vertical;
                 -webkit-line-clamp: 2;
             }
             .panel-box_time{
                 flex: 1;
                 -webkit-flex: 1;
                 display: -webkit-box;
                 display: -webkit-flex;
                 display: flex;             }
             .box_time {
                 padding-top: 0.2rem;
             }
             .box_icon {
                 /*position: absolute;*/
                 /*right: 0.2rem;*/
                 /*top: 0.45rem;*/
                 /*text-align: right;*/
                 /*width: 0.4rem;*/
             }
             .box_icon_img {
                 width: 0.6rem;
             }
             .set-tips{
                 position: relative;
                 display: flex;
                 align-items: center;
                 padding: 15px 0;
                 color: @color-blue;
                 label {
                     /*width: 2rem;*/
                     height: 2rem;
                     line-height: 2.5rem;
                     margin: 0 .5rem 0 1rem;
                     display: block;
                     word-wrap: break-word;
                     word-break: break-all;
                     img{
                         width: 1.3rem;
                     }
                 }
             }
         }
         .bdtop{
             border-top: 1px solid #dddddd;
         }
         .icon-del{
             width: 1rem;
         }
         .mgbtm{
             margin-bottom: .5rem;
         }
     }
     .list{
         margin-top: 0.32rem;
         padding-bottom: 3.5rem;
     }
 </style> <style lang="less">
     div .weui-dialog__btn_primary {
         color: #478aee;
     }
     .page-setting-setgps {
        div .weui-cell {
            padding: 14px 15px;
            border-bottom: 1px solid #D1D1D1;
            &:before {
                 border-top: 0;
             }
         }
         .weui-search-bar__form {
             font-size: 22px;
         }
        .weui-search-bar__box .weui-icon-search{
            line-height: 32px;
        }
       .weui-search-bar__box .weui-search-bar__input {
           padding: 0;
       }     }
 </style>