vue点击定位到指定位置

admin 管理员组

文章数量: 887007

vue点击定位到指定位置

vue制作移动端默认获取我的当前所在城市定位，点击更换选择热门城市菜单切换效果代码。ps：请在移动端预览查看最佳展示效果，pc端无法选择。

使用方法：

1、head引入css文件

* {

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;

}

2、head引入js文件

3、body引入HTML代码

我的城市：  {{location}}    [更改]

我的城市：  {{location}}

{{i.name}}

• {{item.name}}

• {{i.name.substr(0, 1)}}

{{toastText}}

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()

},

})

建议：js调用方法不要修改，样式布局可根据需求修改。

注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！

本文标签： vue点击定位到指定位置