vue手機(jī)城市定位選擇切換代碼

vue制作移動(dòng)端默認(rèn)獲取我的當(dāng)前所在城市定位，點(diǎn)擊更換選擇熱門(mén)城市菜單切換效果代碼。ps：請(qǐng)?jiān)谝苿?dòng)端預(yù)覽查看最佳展示效果，pc端無(wú)法選擇。

使用方法：

1、head引入css文件

<!--默認(rèn)設(shè)置-->
<link rel="stylesheet" type="text/css" href="css/reset.css">

<!--彈出城市列表-->
<link rel="stylesheet" type="text/css" href="css/city.css">

<!--頁(yè)面布局樣式-->
<style>
* {
	margin: 0;
	padding: 0;
}
.mycity {
	text-align: center;
	font-size: 12px;
	margin: 20px 0;
}
.list-box {
	padding: 0 43px;
}
.list-item {
	height: 43px;
	line-height: 42px;
	border-bottom: 1px solid #ECECEC;
	text-align: center;
}
.list-item input {
	border:none;
	text-align: center;
	outline: none;
}
.small-icon {
	display: inline-block;
	width: 100%;
	height: 100%;
	vertical-align: top;
}
.toast {
	position: fixed;
	z-index: 2000;
	left: 50%;
	top:45%;
	transition:all .5s;
	-webkit-transform: translateX(-50%) translateY(-50%);
	   -moz-transform: translateX(-50%) translateY(-50%);
		-ms-transform: translateX(-50%) translateY(-50%);
		 -o-transform: translateX(-50%) translateY(-50%);
			transform: translateX(-50%) translateY(-50%);
	text-align: center;
	border-radius: 5px;
	color:#FFF;
	background: rgba(17, 17, 17, 0.7);
	height: 45px;
	line-height: 45px;
	padding: 0 15px;
	max-width: 150px;
}
</style>

2、head引入js文件

<script src="js/vue.js"></script>
	
<!--地圖api-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=6ee71f2fd5eece7797fafe8b9f7a090a&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>

<script src="js/bscroll.min.js"></script>
<script src="js/city.js"></script>
<script src="js/getping.js"></script>

3、body引入HTML代碼

<div id="app" style="font-size: 14px;color: #292929;font-family: '微軟雅黑'">
	<div class="mycity" @click="selectLocation()">
		我的城市：  <span id="qyxs" style="color:#FF0000">{{location}}</span>    [更改]
	</div>
	<div v-show="isShowCitys" class="city">
		  <div style="text-align: center;position: fixed;top: 0;height: 32px;width:100%;line-height: 32px;z-index: 300;background-color: #FFF;box-shadow: 0 0 2px rgba(0,0,0,.2)
		  ">
			我的城市：  <span id="qyxs" style="color:#FF0000">{{location}}</span>
		  </div>
	  <div class="city-wrapper city-wrapper-hook">
		<div class="scroller-hook">
		  <div class="cities cities-hook">
			<div v-for="i in cityData">
				<div class="title">{{i.name}}</div>
				<ul>
					<li v-for="item in i.cities" class="item city-click" :data-name="item.name" :data-id="item.code"><span class="border-1px name" @touchend="touchUp(item)"  @touchstart="chooseCity()">{{item.name}}</span>
					</li>
				</ul>
			</div>
		  </div>
		</div>
		<div class="shortcut shortcut-hook" style="right: 50px;top:100px !important;" @touchstart="touchIndex">
			<ul style="width: 100px;text-align: left;padding: 20px 0">
				<li v-for="i in cityData" :data-anchor="i.name" class="item">{{i.name.substr(0, 1)}}</li>
			</ul>
		</div>
	  </div>
	</div>
	<div class="toast" v-show="toastShow">
		{{toastText}}
	</div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            origin: 'http://192.168.99.205:800',
            captchaBoxShow: false,
            test: '測(cè)試',
            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, //地圖顯示的縮放級(jí)別
                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,// 數(shù)據(jù)源
            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; //地區(qū)
                var csadcode    = data.regeocode.addressComponent.adcode; //區(qū)域編碼
                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; //坐標(biāo)
                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, //是否使用高精度定位，默認(rèn):true
                        //timeout: 10000, //超過(guò)10秒后停止定位，默認(rèn)：無(wú)窮大
                        buttonOffset: new AMap.Pixel(10, 20), //定位按鈕與設(shè)置的停靠位置的偏移量，默認(rèn)：Pixel(10, 20)
                        zoomToAccuracy: true, //定位成功后調(diào)整地圖視野范圍使定位位置及精度范圍視野內(nèi)可見(jiàn)，默認(rèn)：false
                        noIpLocate: 0, //IP定位，0-3，0都可以使用
                        noGeoLocation: 0, //瀏覽器定位 0-3,
                        showCircle: false, //去除定位藍(lán)圈
                        buttonPosition: 'RT',
                        extensions: 'all'
                    });
                    v.map.addControl(geolocation);
                    geolocation.getCurrentPosition();
                    AMap.event.addListener(geolocation, 'complete', onComplete); //返回定位信息
                    AMap.event.addListener(geolocation, 'error', onError); //返回定位出錯(cuò)信息

                });
                //解析定位結(jié)果
                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);
                        }
                    });
                }
                // 解析定位錯(cuò)誤信息
                function onError(data) {
                    alert('定位失敗,請(qǐng)手動(dòng)選擇所在區(qū)域');
                }
            },
            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>

建議：js調(diào)用方法不要修改，樣式布局可根據(jù)需求修改。

使用聲明

1. 本站所有素材（未指定商用），僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請(qǐng)勿用于商業(yè)用途，會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材，否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途，織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。

查看演示下載資源

486 13416 51