vue手机移动端城市定位和选择代码
时间:2019-11-15 10:34:14 来源:网络收集 作者:不详 点击:次
源码授权:
免费特效
运行环境:
JS
源码大小:
113 KB
普通会员
vue手机移动端城市定位和选择代码,默认获取我的当前所在城市定位,可自定义更换选择城市,带城市列表首字母导航功能。请在手机端查看演示,电脑端无法选择。![]() js代码 <script src="js/bscroll.min.js"></script> <script src="js/city.js"></script> <script src="js/getping.js"></script> <script> var app = new Vue({ el: '#app', data: { origin: 'http://192.168.99.205:800', captchaBoxShow: false, test: '测试', countTime: 0, countTimer: null, time: 60, location: '定位中', submit: { sms_captcha : '', captcha : '', area_code : '', _token : '', }, map: new AMap.Map("container", { resizeEnable: true, //city: citycode, zoom: 17, //地图显示的缩放级别 keyboardEnable: false, citylimit: true, resizeEnable: true }), cityWrapper: document.querySelector('.city-wrapper-hook'), cityScroller: document.querySelector('.scroller-hook'), cities: document.querySelector('.cities-hook'), shortcut: document.querySelector('.shortcut-hook'), shortcutList: [], cityData: cityData,// 数据源 scroll: null, anchorMap: {}, touch: {}, toastShow: false, isShowCitys: false, toastText: '', }, methods: { toast (str) { let v = this v.toastText = str v.toastShow = true setTimeout(function(){ v.toastShow = false }, 1500) }, chooseCity (city) { let v = this v.countTime = 0 v.countTimer = setInterval(function(e){v.countTime ++},1) }, touchUp (item) { let v = this clearInterval(v.countTimer) if (v.countTime < 30) { this.isShowCitys = false this.location = item.name this.submit.area_code = item.code } }, selectLocation () { let v = this this.isShowCitys = true this.$nextTick(function() { this.initCities() }) }, geocoder_CallBack: function (data) { let v = this var adcode3 = data.regeocode.addressComponent.adcode; var address = data.regeocode.formattedAddress; //返回地址描述 var csqy = data.regeocode.addressComponent.district; //地区 var csadcode = data.regeocode.addressComponent.adcode; //区域编码 this.submit.area_code = csadcode var citycode2 = csadcode.substr(0, 4) + "00"; //省份编码 var codes = adcode3.substr(0, 4) + "00"; var citys2 = data.regeocode.addressComponent.city; var poiArr = data.regeocode.pois; //坐标 var resultCount = poiArr.length; v.location = csqy var dz = data.regeocode.formattedAddress; var lng = data.regeocode.roads[0].location.lng; var lat = data.regeocode.roads[0].location.lat; }, zddw: function () { //初始定位 let v = this v.map.plugin('AMap.Geolocation', function() { geolocation = new AMap.Geolocation({ enableHighAccuracy: true, //是否使用高精度定位,默认:true //timeout: 10000, //超过10秒后停止定位,默认:无穷大 buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量,默认:Pixel(10, 20) zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见,默认:false noIpLocate: 0, //IP定位,0-3,0都可以使用 noGeoLocation: 0, //浏览器定位 0-3, showCircle: false, //去除定位蓝圈 buttonPosition: 'RT', extensions: 'all' }); v.map.addControl(geolocation); geolocation.getCurrentPosition(); AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息 AMap.event.addListener(geolocation, 'error', onError); //返回定位出错信息 }); //解析定位结果 function onComplete(data) { var str = []; str.push(data.position.lng); str.push(data.position.lat); var geocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); geocoder.getAddress(str, function(status, result) { if (status === 'complete' && result.info === 'OK') { v.geocoder_CallBack(result); } }); } // 解析定位错误信息 function onError(data) { alert('定位失败,请手动选择所在区域'); } }, initCities: function () { let v = this let y = 0; var titleHeight = 28 var itemHeight = 44 v.cityData.forEach(function(e){ let name = e.name.substr(0, 1) let len = e.cities.length v.anchorMap[name] = y y -= titleHeight + len * itemHeight }) v.shortcut = document.querySelector('.shortcut-hook') v.cityWrapper = document.querySelector('.city-wrapper-hook') v.shortcut.style.top = (v.cityWrapper.clientHeight - v.shortcut.clientHeight) / 2 + 'px'; v.scroll = new window.BScroll(v.cityWrapper, { probeType: 3 }) // console.log(v.scroll, 'v.scroll') // v.scroll.hasVerticalScroll = true // v.scroll.wrapperHeight = $('body').height() v.scroll.scrollTo(0, 0); }, touchIndex: function (e) { // console.log(e, 'e') let v = this let anchor = e.target.getAttribute('data-anchor') // console.log(anchor ,'anchor') let firstTouch = e.touches[0] v.touch.y1 = firstTouch.pageY v.touch.anchor = anchor v.scrollTo(anchor) }, scrollTo: function (anchor) { let v = this v.cityScroller = document.querySelector('.scroller-hook') var maxScrollY = v.cityWrapper.clientHeight - v.cityScroller.clientHeight var y = Math.min(0, Math.max(maxScrollY, v.anchorMap[anchor])) if (typeof y !== 'undefined') { v.scroll.scrollTo(0, y); } }, }, mounted: function () { let v = this this.zddw() v.initCities() }, }) </script> |