头像

vue手机移动端城市定位和选择代码

来源:http://www.ckhyy.com/js/4271.html 18***38 2019-03-27 12:01浏览(271) 收藏

vue手机移动端城市定位和选择代码,默认获取我的当前所在城市定位,可自定义更换选择城市,带城市列表首字母导航功能。请在手机端查看演示,电脑端无法选择。
vue手机移动端城市定位和选择代码
分类:表单代码 > 城市选择 难易:中级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 9

手机扫码访问:

下载资源 下载积分: 20 积分

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>
最新交易
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

1 2
6彩票开奖 www.626903.com-重庆福利彩票官网站| www.37159.cc-好运来彩票在线| www.131982.com-退还彩礼案例| www.99367.cc-竞彩官网网址| www.160270.com-传奇彩票下载| www.474905.com-亚洲彩票百盛平台| www.596996.com-内蒙古快三结果图| www.785523.com-彩票守号能中奖吗| www.902984.com-北京快三遗漏查询表| www.629904.com-龙虎是什么彩票| www.826938.com-胜负彩销量-| www.693665.com-澳客网竞彩足球比分| www.81xy.com-足彩4串1全包| www.8111.in-幸运彩票赚钱| www.71333.com-安徽省福彩一定牛| www.103190.com-旺彩预测大全| www.280022.com-大发快三系统破解版| www.561054.com-彩票中奖所得计算| www.753106.com-高频彩票传统彩票| www.972667.com-彩虹共和-| www.3885.cn-买黄金好还是彩金好| www.98134.com-南通福彩中心官网| www.216228.com-大玩家彩票机攻略| www.381274.com-福彩摇球机-| www.674789.com-安徽体彩15选5| www.797757.com-lcz99购彩票| www.928814.com-七星彩奖表图规律| www.cy12.cc-彩票计划苹果手机版| www.23cl.com-家彩网福彩开奖| www.47864.cc-玩甘肃快三技巧| www.061005.com-亿彩时时彩计划网| www.206879.com-下彩网为什么不抓| www.362071.com-全国彩票开奖查巡| www.736927.com-上海福利彩票知识| www.1978.me-18彩票官网-| www.24060.cc-中彩时时彩娱乐软件| www.023552.com-香港彩库宝典图库| www.170585.com-甘肃快三推荐号| www.318464.com-南昌彩票中心在哪| www.155350.com-足彩有几种购买方式| www.904488.com-福州福彩管理中心| www.ta83.com-彩票数字一共几位数| www.4986.live-足彩中奖奖票大全| www.96879.com-民政部福彩案| www.118288.com-555彩票网安全吗| www.306028.com-好想中彩票买部车| www.564248.com-彩票15期倍投计划| 辉煌彩票www.2875g.com| www.470776.com-彩名堂下载网址| www.ad92.com-腾讯时时彩最新开奖| www.1685.top-久游彩票平台半厘| www.610486.com-四川省彩票兑奖中心| www.788669.com-女方收彩礼不陪嫁| www.969772.com-义乌福彩网-| www.680432.com-彩票二等奖在哪里领| www.928081.com-有人带玩七星彩| www.50qk.com-彩票选号大成| www.5998.site-体彩大乐透誉京华| www.63899.cc-足彩胜负平中奖规则| www.103183.com-顺丰丰彩中奖几率| www.251228.com-249彩票app-| www.456944.com-梯子游戏彩票官网| www.715176.com-快三老师可信吗| www.867069.com-彩票星期四开奖| www.291258.com-乐彩网-首页| www.408600.com-官网七星彩网上投注| www.79902.cc-福彩已亥猪刮刮乐| www.312999.com-鑫彩彩票平台真假的| www.106092.com-福建快三走势图下载| www.8372.top-哪里可以买江西快三| www.192165.com-7彩国际-| www.508225.com-新加坡大彩怎么玩| www.831110.com-三分幸运快三技巧| www.9830.wang-彩票开奖结果今天奖| www.816492.com-竞彩足球中奖双色球| www.602057.com-打彩票不给钱怎么办| www.15788.com-油性彩铅画星空教程| www.rs42.com-彩票计划包赔| www.955595.com-梦到和人平分彩票| www.01453.com-凤凰时时彩注册平台| www.712608.com-齐鲁彩票开奖结果| www.668.vip-福彩没有手机客户端| www.32639.cc-大发云熊猫彩| www.04nt.com-兰花彩铅怎么画星空| www.9388.mobi-双色球彩票真伪查询| www.954200.com-超级时时彩手机软件| www.878637.cc-彩票玩法规则及中奖| www.7415.cc-色彩斑斓的黑| www.0392.link-迪士尼彩乐园3| www.69ji.com-福利彩票中奖真实性| www.960472.com-竞彩彩店宝官方下载| www.24zv.com-网赌时时彩违法| www.6973.biz-立彩彩票注册手机网| www.91308.com-好彩粉色爆珠什么味| www.140035.com-彩票首充彩金| www.35jy.com-特区七星彩网论坛| www.298357.com-彩票历史开奖结果| www.1582.me-收藏彩票有价值吗| www.298375.com-彩票开奖结果查询表| www.661504.com-今天的三d彩报| www.f07.top-七乐彩随机选号码| www.274284.com-有没有人玩大发快三| www.211819.com-彩客网电脑版| www.224777.com-发彩网官方网站| www.53779.cc-新盛时时彩求带| www.396363.com-竞彩单场返奖率| www.255952.com-玩时时彩输了很多钱| www.304748.com-快三稳赢计划| www.dm50.com-小鹿彩票奖表下载| www.366839.com-福彩走势图连线版| www.617920.com-亿网彩票是不是黑网| www.18229.cc-彩票资料网站源码| www.056337.com-秘梦解图七星彩奖表| www.283895.com-六位数彩票有哪些| www.869404.com-安装大公鸡七星彩| www.677372.com-重庆十选五彩票结果| www.60ts.com-双色球专业玩彩预测| www.471920.com-星彩网是什么| www.535602.com-福彩是几位数一共| www.393513.com-国彩开奖结果| www.371888.com-牛彩彩票是正规的吗| www.964763.com-福彩快3有什么规律| www.630559.com-亿彩软件下载| www.78331.cc-彩票属于哪个神仙管| www.ra67.com-时时彩就是坑| www.629101.com-国外彩票中奖新闻| www.416323.com-今日足球推荐竞彩网| www.625685.com-e乐彩手机网站| www.801653.com-体彩顶呱一等奖| www.980580.com-6768彩票怎么样| 计划软件-好彩堂跑狗马会现场| www.81448.cc-5268彩票-| www.279969.com-一分彩规律破解| www.hl61.com-大发快三倍投攻略| www.401766.com-开心100彩票平台| www.560548.com-kk彩票邀请码| www.639984.com-中彩网7乐彩走势图| www.732276.com-解除婚约退彩礼案例| www.808459.com-彩票分析大师客服| www.878864.com-九江体彩中心电话| www.951270.com-九号彩票平台登录| www.999820.com-河北福彩排七开奖| www.pv21.com-彩票九最新版本下载| www.361313.com-永安彩票app下载| www.512162.com-儿童动物彩铅画图片| www.648110.com-新浪网数字彩票频道| www.806287.com-59彩票下载-| 126彩票网www.319126.com| www.3968.net-的的彩讯app| www.pk46.com-中国体育彩票玩法| www.6662.cn-足球竞彩310推荐| www.654017.com-哪些网投送彩金| www.810197.com-竞彩足球术语| www.875082.com-足彩微信交流群| www.119915.com-五分快三倍投的赢法| www.432189.com-天下彩txbio| www.70144.com-福彩刺客论坛| www.700274.com-甘肃快三和值号推荐| www.003487.com-盈彩计划网站| www.187066.com-吉林快三有玩的吗| www.97122.com-足彩去哪里买得到| www.726468.com-彩福彩票是骗人的吗| www.796050.com-彩尊赚钱是不是真的| www.196212.com-百宝彩河北快3|