vue点击定位到指定位置_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}}    [更改]