<template>
<div>
<div class="searchMap">
<div :class="['searchName',{activeBox:$store.state.toolBarchild.dinwei}]" @click="precisonMapClick">
<div>{{$store.state.tooBarChild.cityName}}</div>
<i class="el-icon-arrow-up" v-if="$store.state.tooBarChild.dinwei"></i>
<i class="el-icon-arrow-down" v-else></i>
</div>
</div>
<div class="cityName" v-show="$store.state.tooBarChild.dinwei">
<div class="cityH">
<div class="dangQian">当前城市:</div>
<div class="name">{{$store.state.tooBarChild.cityName}}</div>
<div class="closeSearch" @click="closeHandel">x</div>
</div>
<div class="cityList">
<div :class="['cityLeft',{active:itemHope == index}]" v-for="(item,index) in cityList" :key="index" @click="reMenClick(index)">
{{item}}
</div>
</div>
//输入框
<div class="citySearch">
<el-autocomplete>
v-model.trim="state"
:fetch-suggestions = "querySearch"
:trigger-on-focus="false"
@select="handelSelect"
class="inlin-input"
:popper-append-to-body="false"
</el-autocomplete>
<div class="iconSearch" @click="searchClick">
<i class="el-icon-search"></i>
</div>
</div>
<div class="toolContainer">
<div class="tabs">
<p v-for="(item,index) in firstProvince" :key="index" @click="letterClick(item,index)" :class="['letter',{active:indexProvince== index}]">
{{item}}
</p>
</div>
<div class="province scrollbar" ref="province">
<div class="cityProvince" v-for="(item,index) in dataShi" :key="item.id">
<div class="cityName" @click="shiHandel(item,index)">{{item.name}}</div>
<div class="cityJib">
<div class="cityBox" v-for="(k,index) in item.citys" :key="k.id">
<div class="cityRight" @click="shiHandel(k,index)">{{k.name}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
//npm i js-pinyin下载
let pinyin = require("js-pinyin");
sxport default{
data(){
return{
itemHope:10,
indexProvince:50,
cityList:[
"上海",
"江苏",
"安徽",
"浙江",
"湖北",
"河南",
"山东",
"吉林",
"北京"
],
dataShi:[],//省市
state:"",
shiArr:{
shiCode:"",
lng:"",
lat:"",
name:""
},
restaurants:[],
dataSearchArr:[],
xzqList:[],
firstProvince:["A","B","C","F","G","H","J","L","N","Q","S","T","Y","Z"]
}
},
methods:{
querySearch(queryString,cb){
let searchArr = [];
this.restaurants.forEach(item=>{
item.citys.forEach(k=>{
searchArr.push({
value:k.name,
lat:k.lat,
lng:k.lng,
code:k.zoningcode,
name:k.name
})
})
})
let restaurants = searchArr;
let results = queryString?restaurants.filter(this.createFilter):restaurants;
cb(results);
},
createFilter(queryString){
return restaurants=>{
return(
restaurants.value.toLowerCase().indexOf(queryString.toLowerCase())!==-1
)
}
},
handelSelect(item){
this.shiArr.shiCode = item.code;
this.shiArr.lng = item.lng;
this.shiArr.lat = item.lat;
this.shiArr.name = item.name;
},
closeHandel(){
this.$store.state.tooBarChild.dinwei = false;
},
//搜索点击事件
searchClick(){
if(this.state=="")return;
this.flyDingwei(this.shiArr.lng,this.shiArr.lat);
this.$store.commit("setCode",this.shiCode);
this.$store.commit("setCityName",this.shiArr.name);
},
//热门城市
reMenClick(index){
this.itemHope = index;
//上海
if(index == 0){
this.$store.state.tooBarChild.cityName = "上海";
let [lng,lat] = [121.472644,31.231706];
this.flyDingwei(lng,lat);
let zoningcode = "310100";
this.$store.commit("setCode",zoningcode);
}
},
//渲染数据
provinceClick(){
let that = this;
that.$parent.hdiMap.getProvinceInfo(data=>{
data.forEach(item=>{
that。provinceChildrenClick(item);
})
})
},
provinceChildrenClick(provinceCode){
pinyin.setOptions({checkPolyphone:false,chaecase:0});
//添加首字母
if(provinceCode.name =="重庆"){
provinceCode.first ="C";
}else{
provinceCode.first = pinyin.getCamelChars(provinceCode.name).substring(0,1);
}
this.hdiMap.getCitysInfo(provinceCode.adcode,data=>{
this.dataShi.push({
first:provinceCode.first,
name:provinceCode.name,
lng:provinceCode.lng,
lat:provinceCode.lat,
citys:data
})
})
this.restaurants = this.dataShi;
},
letterClick(k,index){
this.indexProvince = index;
let provinceArray = [];
let provinceArray02 = [];
this.$refs.province.scrollTop = 0;
provinceArray = this.dataShi.filter(value=>{
return value.first == k;
})
provinceArray02 = this.dataShi.filter(value=>{
return value.first!== k;
})
let provinceArray03 = [...provinceArray,...provinceArray02];
this.dataShi = provinceArray03;
},
//按省份
shiHandel(item,index){
this.itemHope =1000;
this.flyDingwei(item.lng,item.lat);
this.$store.commit("setcode",item.zipcode);
this.$store.commit("setCityName",item.name);
},
flyDingwei(lag,lat){
this.$parent.map.flyTo({
center:[lng,lat],
zoom:10,
bearing:0,
speed:3,
curve:1,
easing:function(t){
return t;
},
essential:true
})
}
}
}
</script>
<style lang="less" scoped>
.searchMap{
position:absolute;
top:20px;
right:332px;
.searchName{
height:34px;
line-height:34px;
display:flex;
justify-content:center;
align-item:center;
background-color:#434343;
color:#fff;
font-size:14px;
letter-spacing:3px;
cursor:pointer;
&:hover{
color:#23D096;
}
padding-left:10px;
}
.activeBox{
color:#23D096;
}
}
.cityName{
position:absolute;
top:63px;
right:34px;
width:340px;
background-color:#434343;
padding:0 10px 0 10px;
.cityH{
display:flex;
height:40px;
line-height:40px;
font-size:14px;
border-bottom:1px solid #fff;
position:relative;
.dangQian{
color:#23D096;
}
.inputReady{
background-color:#434343;
color:#23D096;
font-size:14px;
letter-spacing:3px;
}
.closeSearch{
position:absolute;
right:-1px;
top:-1px;
color:#fff,
cursor:pointer;
width:30px;
text-align:center;
}
}
.cityList{
display:flex;
flex-wrap:wrap;
align-item:center;
height:60px;
color:#fff;
cursor:pointer;
border-bottom:1px solid #fff;
.cityLeft{
margin-left:8px;
letter-spacing:3px;
}
.active{
color:#23D096;
}
}
.citySearch{
margin-top:15px;
height:30px;
line-height:30px;
display:flex;
width:340px;
/deep/.el-input_inner{
color:#fff;
background-color:#434343;
border-color:#fff;
height:31px;
line-height:31px;
outline:none;
border-right:none;
border-radius:0;
width:238px;
}
/deep/.el-autocomplete-suggestion{
border-radius:0;
}
/deep/.el-autocomplete-suggestion_wrap{
padding:0!important;
background-color:#434343;
}
/deep/.el-autocomplete-suggestion_wrap li{
color:#fff;
}
/deep/.el-autocomplete-suggestion li.highlighted{
color:#23D096;
}
/deep/.el-autocomplete-suggestion li:hover{
background-color:#434343;
}
/deep/.el-autocomplete-suggestion li.highlighted, .el-autocomplete-suggestion li:hover{
background-color:#434343;
border:1px solid #fff;
}
.iconSearch{
height:29px;
line-height:29px;
background-color:#23D096;
padding:0 20px;
color:#fff;
margin-top:1px;
border:1px solid #fff;
border-left:none;
cursor:pointer;
}
}
.toolContainer{
margin-right:-10px;
.tabs{
font-size:15px;
color:#fff;
height:40px;
line-height:40px;
display:flex;
justify-content:spacing-around;
cursor:pointer;
border-botton:1px solid #fff;
.letter{
&:hover{
color:#23D096;
}
}
.active{
color:#23D096;
}
}
.province{
overflow-x:hidden;
max-height:340px;
.cityProvince{
display:flex;
.cityName{
color:#fff;
font-size:15px;
min-width:50px;
line-height:30px;
height:30px;
cursor:pointer;
font-weight:bold;
&:hover{
color:#23D096
}
}
.cityJib{
display:flex;
flex-wrap:wrap;
.cityBox{
display:flex;
font-size:12px;
flex-wrap:wrzp;
coloe:#fff;
.cityRight{
height30px;
line-height:30px;
margin-right:6px;
cursor:pointer;
&:hover{
color:#23D096;
}
}
}
}
}
}
}
}
//滚动条样式
.scrollbar::-webkit-scrollbar{
width:8px;
height1px;
}
.scrollbar::-webkit-scrollbar-thumb{
border-radius:10px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:#bfbaba;
}
.scrollbar::-webkit-scrollbar-track{
border-radius:10px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:#bfbaba;
}
</style>
vue+element省市区搜索实现
最新推荐文章于 2024-07-05 15:32:21 发布