小程序城市选择demo
最近遇到了一个新的需求，就是在项目中添加城市选择，小程序的城市选择也不是什么难点，网上也有很多的demo，主要是数据格式的不同，总结了一下，基本上属于两种结构。大部分demo都是引入所有的城市，大家在选择测试的时候可能觉得并不方便，所有我把数据抽取了部分出来，大家尝试后可以再对所有城市的数据进行封装，在网络上搜索的话基本上分为两种数据格式，多数如下第一种所示，第二种是根据接口需要更改的格式，同时前端也会使用两种不同的数据格式去渲染。
第一种
citys: [
{
"A": [
{
"name": "阿坝",
"key": "A"
},
{
"name": "阿拉善",
"key": "A"
},
],
"B": [
{
"name": "北京",
"key": "B"
},
{
"name": "白银",
"key": "B"
},
],
"C": [
{
"name": "重庆",
"key": "C"
},
{
"name": "成都",
"key": "C"
},
]
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
WXML
<scroll-view scroll-y="true" style="height: {{winHeight}}px;" scroll-into-view="{{scrollTopId}}" class="city_list">
<block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
<text id="{{idx}}" class="list_tit">{{idx}}</text>
<block wx:for="{{cityName}}">
<view class="list_con" data-city="{{item.name}}" bindtap="bindCity">{{item.name}}</view>
</block>
</block>
</scroll-view>
<!--城市选择列表-->
<view class="scroll_list" bindtouchstart="chStart" bindtouchend="chEnd"
style="background: rgba(0,0,0,{{trans}});">
<view class="right-title">历史</view>
<view class="right-title">热门</view>
<block wx:for="{{city}}" wx:for-index="idx" wx:for-item="cityName" wx:key="{{idx}}">
<view id="{{idx}}" class="scroll_list_chi" style="line-height:{{lineHeight}}px ; height:{{lineHeight}}px ;font-size:24rpx;" bindtouchstart="getWords" bindtouchend="setWords">{{idx}}</view>
</block>
</view>
<!--选择显示-->
<view hidden="{{hidden}}" class="showwords">
{{showwords}}
</view>
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
WXSS
/*城市列表*/
.city_list {
position: relative;
}
/*城市选择头部*/
.list_tit {
display: block;
line-height: 40px;
height: 40px;
padding-left: 15px;
font-size: 16ppx;
background: #f5f5f5;
color: #666;
}
.list_item {
height: 40px;
/*border-top: 1px #f5f5f5 solid ;*/
line-height: 40px;
font-size: 16px;
padding-left: 15px;
}
.list_item::before {
content: " ";
height: 1px;
border-top: 1px #f5f5f5 solid;
position: absolute;
width: 100%;
}
.list_item::before:nth-child(1) {
border: none;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0,0,0,0);
position: absolute;
width: 46rpx;
top: 100rpx;
right: 10px;
}
.scroll_list_chi {
text-align: center;
font-size: 22rpx;
color: rgb(99, 99, 99)
}
.right-title{
font-size:24rpx;
width:80rpx;
}
/*显示框*/
.showwords {
width: 80px;
height: 80px;
background: rgba(0,0,0,.3);
border-radius:50%;
line-height: 80px;
text-align: center;
font-size:10vw;
margin: auto;
position: absolute;
top: 0;left: 0;bottom: 0;right: 0;
z-index: 999;
}
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
JS
city1封装的数据我会放在页面的最下方
//先引用城市数据文件
var city = require('../../utils/city1.js')
var lineHeight = 0;
var endWords = "";
var isNum;
Page({
data: {
"hidden": true,
cityName: "", //获取选中的城市名
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
//初始化封装的城市数据
var cityChild = city.City[0];
console.log(cityChild)
var that = this;
wx.getSystemInfo({
success: function(res) {
//lineHeight是右侧A B C D的行高，这个可以根据需要自行设置，我在第二个demo中重新设置
lineHeight = (res.windowHeight - 100) / 22;
console.log(res.windowHeight - 100)
that.setData({
city: cityChild,
winHeight: res.windowHeight-2,
lineHeight: lineHeight
})
}
})
},
//触发全部开始选择
chStart: function() {
console.log('触发全部开始选择')
//trans是代表右侧字母列表背景的透明度，在演示中可以看到效果，
//点击右侧列表时呈现灰色背景，点击结束后透明度为0,同时显示页面最下面定义的showWords的显示
this.setData({
trans: ".3",
hidden: false
})
},
//触发结束选择
chEnd: function() {
console.log('触发结束选择')
this.setData({
trans: "0",
hidden: true,
scrollTopId: this.endWords
})
},
//获取文字信息
getWords: function(e) {
console.log('获取文字信息')
var id = e.target.id;
this.endWords = id;
isNum = id;
this.setData({
showwords: this.endWords
})
},
//设置文字信息
setWords: function(e) {
console.log('设置文字信息')
var id = e.target.id;
this.setData({
scrollTopId: id
})
},
//选择城市，并让选中的值显示在文本框里
bindCity: function(e) {
console.log(e.currentTarget.dataset.city);
var cityName = e.currentTarget.dataset.city;
wx.showToast({
title: '您选择了' + cityName,
})
}
})
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
第二种
citys: [{
"name": "A",
"list": [{
"cityCode": "320001",
"cityName": "阿坝"
},
{
"cityCode": "320002",
"cityName": "阿拉善"
},
]
},
{
"name": "B",
"list": [{
"cityCode": "130600",
"cityName": "保定市"
}]
},
{
"name": "C",
"list": [{
"cityCode": "130800",
"cityName": "承德市"
}]
},
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
数据格式二演示效果
WXML
<scroll-view class="flex-left" scroll-y="true" scroll-into-view="{{scrollIntoId}}">
<view class='top-module'>
<view class='top-inner-box'>
<view class='hot-city-title'>国内热门城市</view>
<view class='list-one-line'>
<view class='one-box' wx:for="{{hotCitys}}" data-index="{{index}}" class="{{((index+1)%3) !=0 ?'one-box':'one-box-last'}}" catchtap='selectHotCity'>{{item.cityName}}</view>
</view>
</view>
</view>
<view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" class='city-list' catchtap='selectCity'>
<view class="item-title item-a" id="{{zimu.name}}" data-bigindex="{{bigindex}}">{{zimu.name}}</view>
<view class="item" wx:for="{{zimu.list}}" wx:key="item" wx:for-item="item" data-bigindex="{{bigindex}}" data-item="{{zimu}}" data-index='{{index}}'>{{item.cityName}}</view>
</view>
</scroll-view>
<view class="scroll_list" style='margin-top:{{(100-2.8*(citys.length))/4}}vh'>
<view class="scroll_list_chi">热</view>
<view wx:for="{{citys}}" wx:key="zimu" wx:for-index="bigindex" wx:for-item="zimu" bindtouchstart="touchstartfn">
<view class="scroll_list_chi" data-id="{{zimu.name}}" data-bigindex="{{bigindex}}" data-index='{{index}}'>{{zimu.name}}</view>
</view>
</view>
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
WXSS
/**index.wxss**/
page{
background: #F4F4F4;
}
.top-module{
width: 100vw;
height: auto;
}
.top-inner-box{
width: 96vw;
height: auto;
padding-left: 2vw;
padding-right: 2vw;
background: white;
}
.hot-city-title{
height: 8vh;
line-height: 8vh;
}
.list-one-line{
height: auto;
width: 84vw;
margin-left: 2vw;
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.one-box{
height: 5vh;
width:25vw;
margin-right: 2.5vw;
display: flex;
align-items: center;
justify-content: center;
border:1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
.one-box-last{
height: 5vh;
width:25vw;
display: flex;
align-items: center;
justify-content: center;
border:1rpx solid rgb(233, 232, 232);
margin-bottom: 1.4vh;
}
page{
height: 100%;
}
.zimu{
width: 50rpx;
height: 20px;
line-height: 20px;
}
.zimulist{
position: fixed;
top: 0;
right: 0;
bottom:0;
width: 50rpx;
z-index: 999999999999;
background-color: #fff;
text-align: center;
}
.item-title{
height: 48rpx;
line-height: 48rpx;
border-bottom: solid 1rpx #f0f1f2;
padding-left: 2vw;
color: #9A9A9A;
}
.item{
height:80rpx;
line-height: 80rpx;
border-bottom: 1rpx solid #D9D9D9;
margin-left: 3vw;
}
.item-a{
background-color: #f0f1f2;
}
.flex-wrap{
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
}
.flex-left{
width: 100vw;
height: 100%;
}
.flex-right{
width: 50rpx;
height: 100%;
}
/*城市选择 右边*/
.scroll_list {
background: rgba(0,0,0,0);
position: absolute;
width: 46rpx;
top: 100rpx;
right: 6rpx;
}
.city-list{
background: white;
}
.scroll_list_chi {
text-align: center;
font-size: 24rpx;
color: rgb(39, 39, 39);
height: 2.4vh;
}
.top-module>view{
font-size: 28rpx;
}
.city-list>view{
font-size: 28rpx;
}
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
JS
var app = getApp()
Page({
data: {
scrollIntoId: '',
hotCitys: [{
"cityCode": "130600",
"cityName": "保定市"
},
{
"cityCode": "140100",
"cityName": "太原市"
},
{
"cityCode": "150300",
"cityName": "乌海市"
},
{
"cityCode": "140400",
"cityName": "长治市"
},
{
"cityCode": "320100",
"cityName": "南京市"
},
{
"cityCode": "310000",
"cityName": "上海市"
}
],
citys: [{
"name": "A",
"list": [{
"cityCode": "320001",
"cityName": "阿坝"
},
{
"cityCode": "320002",
"cityName": "阿拉善"
},
{
"cityCode": "320003",
"cityName": "阿里"
},
{
"cityCode": "320004",
"cityName": "安康"
},
]
},
{
"name": "B",
"list": [{
"cityCode": "130600",
"cityName": "保定市"
}]
},
{
"name": "C",
"list": [{
"cityCode": "130800",
"cityName": "承德市"
}]
},
{
"name": "H",
"list": [{
"cityCode": "131100",
"cityName": "衡水市"
},
{
"cityCode": "320800",
"cityName": "淮安市"
}
]
},
{
"name": "M",
"list": [{
"cityCode": "231000",
"cityName": "牡丹江市"
}]
},
{
"name": "N",
"list": [{
"cityCode": "320100",
"cityName": "南京市"
}]
},
{
"name": "Q",
"list": [{
"cityCode": "130300",
"cityName": "秦皇岛市"
}]
},
{
"name": "S",
"list": [{
"cityCode": "310000",
"cityName": "上海市"
},
{
"cityCode": "130100",
"cityName": "石家庄市"
},
{
"cityCode": "320500",
"cityName": "苏州市"
}
]
},
{
"name": "T",
"list": [{
"cityCode": "140100",
"cityName": "太原市"
},
{
"cityCode": "130200",
"cityName": "唐山市"
}
]
},
{
"name": "W",
"list": [{
"cityCode": "150300",
"cityName": "乌海市"
}]
},
{
"name": "X",
"list": [{
"cityCode": "320300",
"cityName": "徐州市"
}]
},
{
"name": "Y",
"list": [{
"cityCode": "320900",
"cityName": "盐城市"
},
{
"cityCode": "321000",
"cityName": "扬州市"
},
{
"cityCode": "140300",
"cityName": "阳泉市"
}
]
},
{
"name": "Z",
"list": [{
"cityCode": "140400",
"cityName": "长治市"
},
{
"cityCode": "321100",
"cityName": "镇江市"
}
]
}
],
},
onShow: function() {
},
/**
* 右侧字母索引的触发
*/
touchstartfn: function (e) {
//console.log(e.target.id)
console.log(e);
var letter = e.target.dataset.id
var index = e.target.dataset.bigindex
var letter = this.data.citys[index].name
this.setData({
scrollIntoId: letter
})
wx.showToast({
icon: 'none',
title: letter
})
},
// 选择热门城市
selectHotCity: function(e) {
var that = this
console.log(e.currentTarget.dataset.index) //获取点击事件列表的索引
var index = e.currentTarget.dataset.index
var cityName = that.data.hotCitys[index].cityName //根据索引找到热门城市的名称
var cityCode = that.data.hotCitys[index].cityCode //根据索引找到热门城市的code编码
wx.showToast({
title: cityName,
})
},
//选择城市
selectCity: function(e) {
console.log(e)
var bigIndex = e.target.dataset.bigindex //嵌套循环找出外部的索引
var index = e.target.dataset.index //嵌套循环找出子索引
var zimu = this.data.citys[bigIndex].name //找到对应的字母
console.log(index)
console.log(zimu)
if (index == undefined) { //如果子索引为未定义，即点击了列表中的字母
wx.showToast({
title: zimu,
})
} else { //如果自索引有值，即点击了列表中的城市项
var cityName = this.data.citys[bigIndex].list[index].cityName //双重索引找到城市名称
var cityCode = this.data.citys[bigIndex].list[index].cityCode //双重索引找到城市编码
wx.showToast({
title: cityName,
})
}
},
})
一键获取完整项目代码
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
补充第一种方法封装的城市JS
var city = {
"City": [{
"A": [{
"name": "阿坝",
"key": "A"
},
{
"name": "阿拉善",
"key": "A"
},
{
"name": "阿里",
"key": "A"
},
{
"name": "安康",
"key": "A"
},
{
"name": "安庆",
"key": "A"
},
{
"name": "鞍山",
"key": "A"
},
{
"name": "安顺",
"key": "A"
},
{
"name": "安阳",
"key": "A"
},
{
"name": "澳门",
"key": "A"
}
],
"B": [{
"name": "北京",
"key": "B"
},
{
"name": "白银",
"key": "B"
},
{
"name": "保定",
"key": "B"
},
{
"name": "宝鸡",
"key": "B"
},
{
"name": "保山",
"key": "B"
},
{
"name": "包头",
"key": "B"
},
{
"name": "巴中",
"key": "B"
},
{
"name": "北海",
"key": "B"
},
{
"name": "蚌埠",
"key": "B"
},
{
"name": "本溪",
"key": "B"
},
{
"name": "毕节",
"key": "B"
},
{
"name": "滨州",
"key": "B"
},
{
"name": "百色",
"key": "B"
},
{
"name": "亳州",
"key": "B"
}
],
"C": [{
"name": "重庆",
"key": "C"
},
{
"name": "成都",
"key": "C"
},
{
"name": "长沙",
"key": "C"
},
{
"name": "长春",
"key": "C"
},
{
"name": "沧州",
"key": "C"
},
{
"name": "常德",
"key": "C"
},
{
"name": "昌都",
"key": "C"
},
{
"name": "长治",
"key": "C"
},
{
"name": "常州",
"key": "C"
},
{
"name": "巢湖",
"key": "C"
},
{
"name": "潮州",
"key": "C"
},
{
"name": "承德",
"key": "C"
},
{
"name": "郴州",
"key": "C"
},
{
"name": "赤峰",
"key": "C"
},
{
"name": "池州",
"key": "C"
},
{
"name": "崇左",
"key": "C"
},
{
"name": "楚雄",
"key": "C"
},
{
"name": "滁州",
"key": "C"
},
{
"name": "朝阳",
"key": "C"
}
],
"D": [{
"name": "大连",
"key": "D"
},
{
"name": "东莞",
"key": "D"
},
{
"name": "大理",
"key": "D"
},
{
"name": "丹东",
"key": "D"
},
{
"name": "大庆",
"key": "D"
},
{
"name": "大同",
"key": "D"
},
{
"name": "大兴安岭",
"key": "D"
},
{
"name": "德宏",
"key": "D"
},
{
"name": "德阳",
"key": "D"
},
{
"name": "德州",
"key": "D"
},
{
"name": "定西",
"key": "D"
},
{
"name": "迪庆",
"key": "D"
},
{
"name": "东营",
"key": "D"
}
],
"E": [{
"name": "鄂尔多斯",
"key": "E"
},
{
"name": "恩施",
"key": "E"
},
{
"name": "鄂州",
"key": "E"
}
],
"F": [{
"name": "福州",
"key": "F"
},
{
"name": "防城港",
"key": "F"
},
{
"name": "佛山",
"key": "F"
},
{
"name": "抚顺",
"key": "F"
},
{
"name": "抚州",
"key": "F"
},
{
"name": "阜新",
"key": "F"
},
{
"name": "阜阳",
"key": "F"
}
],
"G": [{
"name": "广州",
"key": "G"
},
{
"name": "赣州",
"key": "G"
},
{
"name": "桂林",
"key": "G"
},
{
"name": "贵阳",
"key": "G"
},
{
"name": "甘南",
"key": "G"
},
{
"name": "甘孜",
"key": "G"
},
{
"name": "广安",
"key": "G"
},
{
"name": "广元",
"key": "G"
},
{
"name": "果洛",
"key": "G"
},
{
"name": "贵港",
"key": "G"
}
],
"H": [{
"name": "杭州",
"key": "H"
},
{
"name": "哈尔滨",
"key": "H"
},
{
"name": "合肥",
"key": "H"
},
{
"name": "海口",
"key": "H"
},
{
"name": "海东",
"key": "H"
},
{
"name": "海北",
"key": "H"
},
{
"name": "海南",
"key": "H"
},
{
"name": "海西",
"key": "H"
},
{
"name": "邯郸",
"key": "H"
}
,
{
"name": "汉中",
"key": "H"
},
{
"name": "鹤壁",
"key": "H"
},
{
"name": "河池",
"key": "H"
},
{
"name": "鹤岗",
"key": "H"
},
{
"name": "黑河",
"key": "H"
},
{
"name": "衡水",
"key": "H"
},
{
"name": "衡阳",
"key": "H"
}
,
{
"name": "河源",
"key": "H"
},
{
"name": "贺州",
"key": "H"
},
{
"name": "红河",
"key": "H"
},
{
"name": "淮安",
"key": "H"
},
{
"name": "淮北",
"key": "H"
},
{
"name": "怀化",
"key": "H"
},
{
"name": "淮南",
"key": "H"
},
{
"name": "黄冈",
"key": "H"
},
{
"name": "黄南",
"key": "H"
},
{
"name": "黄山",
"key": "H"
},
{
"name": "黄石",
"key": "H"
},
{
"name": "惠州",
"key": "H"
},
{
"name": "葫芦岛",
"key": "H"
},
{
"name": "呼伦贝尔",
"key": "H"
},
{
"name": "湖州",
"key": "H"
},
{
"name": "菏泽",
"key": "H"
}
],
"J": [
{
"name": "济南",
"key": "J"
},
{
"name": "佳木斯",
"key": "J"
},
{
"name": "吉安",
"key": "J"
},
{
"name": "江门",
"key": "J"
},
{
"name": "焦作",
"key": "J"
},
{
"name": "嘉兴",
"key": "J"
},
{
"name": "嘉峪关",
"key": "J"
},
{
"name": "揭阳",
"key": "J"
},
{
"name": "吉林",
"key": "J"
},
{
"name": "金昌",
"key": "J"
},
{
"name": "晋城",
"key": "J"
},
{
"name": "景德镇",
"key": "J"
},
{
"name": "荆门",
"key": "J"
},
{
"name": "荆州",
"key": "J"
},
{
"name": "金华",
"key": "J"
}
,
{
"name": "济宁",
"key": "J"
},
{
"name": "晋中",
"key": "J"
},
{
"name": "锦州",
"key": "J"
},
{
"name": "九江",
"key": "J"
},
{
"name": "酒泉",
"key": "J"
}
],
"K": [{
"name": "昆明",
"key": "K"
},
{
"name": "开封",
"key": "K"
}
],
"L": [{
"name": "兰州",
"key": "L"
},
{
"name": "拉萨",
"key": "L"
},
{
"name": "来宾",
"key": "L"
},
{
"name": "莱芜",
"key": "L"
},
{
"name": "廊坊",
"key": "L"
},
{
"name": "乐山",
"key": "L"
},
{
"name": "凉山",
"key": "L"
},
{
"name": "连云港",
"key": "L"
}
,
{
"name": "聊城",
"key": "L"
}
,
{
"name": "辽阳",
"key": "L"
},
{
"name": "辽源",
"key": "L"
},
{
"name": "丽江",
"key": "L"
},
{
"name": "临沧",
"key": "L"
},
{
"name": "临汾",
"key": "L"
},
{
"name": "临夏",
"key": "L"
},
{
"name": "临沂",
"key": "L"
}
,
{
"name": "林芝",
"key": "L"
},
{
"name": "丽水",
"key": "L"
},
{
"name": "六安",
"key": "L"
},
{
"name": "六盘水",
"key": "L"
},
{
"name": "柳州",
"key": "L"
},
{
"name": "陇南",
"key": "L"
},
{
"name": "龙岩",
"key": "L"
},
{
"name": "娄底",
"key": "L"
},
{
"name": "漯河",
"key": "L"
},
{
"name": "洛阳",
"key": "L"
},
{
"name": "泸州",
"key": "L"
},
{
"name": "吕梁",
"key": "L"
}
],
"M": [{
"name": "马鞍山",
"key": "M"
},
{
"name": "茂名",
"key": "M"
},
{
"name": "眉山",
"key": "M"
},
{
"name": "梅州",
"key": "M"
},
{
"name": "绵阳",
"key": "M"
},
{
"name": "牡丹江",
"key": "M"
}
],
"N": [
{
"name": "南京",
"key": "N"
},
{
"name": "南昌",
"key": "N"
},
{
"name": "南宁",
"key": "N"
},
{
"name": "南充",
"key": "N"
},
{
"name": "南平",
"key": "N"
},
{
"name": "南通",
"key": "N"
},
{
"name": "南阳",
"key": "N"
},
{
"name": "那曲",
"key": "N"
}
,
{
"name": "内江",
"key": "N"
},
{
"name": "宁德",
"key": "N"
},
{
"name": "怒江",
"key": "N"
}
],
"P": [
{
"name": "盘锦",
"key": "P"
},
{
"name": "攀枝花",
"key": "P"
},
{
"name": "平顶山",
"key": "P"
},
{
"name": "平凉",
"key": "P"
},
{
"name": "萍乡",
"key": "P"
},
{
"name": "莆田",
"key": "P"
},
{
"name": "濮阳",
"key": "P"
}
],
"Q": [
{
"name": "青岛",
"key": "Q"
},
{
"name": "黔东南",
"key": "Q"
},
{
"name": "黔南",
"key": "Q"
},
{
"name": "黔西南",
"key": "Q"
},
{
"name": "庆阳",
"key": "Q"
},
{
"name": "清远",
"key": "Q"
},
{
"name": "秦皇岛",
"key": "Q"
},
{
"name": "钦州",
"key": "Q"
},
{
"name": "齐齐哈尔",
"key": "Q"
},
{
"name": "泉州",
"key": "Q"
},
{
"name": "曲靖",
"key": "Q"
},
{
"name": "衢州",
"key": "Q"
}
],
"R": [{
"name": "日喀则",
"key": "R"
},
{
"name": "日照",
"key": "R"
}
],
"S": [{
"name": "上海",
"key": "S"
},
{
"name": "深圳",
"key": "S"
},
{
"name": "苏州",
"key": "S"
},
{
"name": "沈阳",
"key": "S"
},
{
"name": "石家庄",
"key": "S"
},
{
"name": "三门峡",
"key": "S"
},
{
"name": "三明",
"key": "S"
},
{
"name": "三亚",
"key": "S"
}
,
{
"name": "商洛",
"key": "S"
}
,
{
"name": "商丘",
"key": "S"
},
{
"name": "上饶",
"key": "S"
},
{
"name": "山南",
"key": "S"
},
{
"name": "汕头",
"key": "S"
},
{
"name": "汕尾",
"key": "S"
},
{
"name": "韶关",
"key": "S"
},
{
"name": "绍兴",
"key": "S"
}
,
{
"name": "邵阳",
"key": "S"
},
{
"name": "十堰",
"key": "S"
},
{
"name": "朔州",
"key": "S"
},
{
"name": "四平",
"key": "S"
},
{
"name": "绥化",
"key": "S"
},
{
"name": "遂宁",
"key": "S"
},
{
"name": "随州",
"key": "S"
},
{
"name": "娄底",
"key": "S"
},
{
"name": "宿迁",
"key": "S"
},
{
"name": "宿州",
"key": "S"
}
],
"T": [
{
"name": "天津",
"key": "T"
},
{
"name": "太原",
"key": "T"
},
{
"name": "泰安",
"key": "T"
},
{
"name": "泰州",
"key": "T"
},
{
"name": "唐山",
"key": "T"
},
{
"name": "天水",
"key": "T"
},
{
"name": "铁岭",
"key": "T"
},
{
"name": "铜川",
"key": "T"
},
{
"name": "通化",
"key": "T"
},
{
"name": "通辽",
"key": "T"
},
{
"name": "铜陵",
"key": "T"
},
{
"name": "铜仁",
"key": "T"
},
{
"name": "台湾",
"key": "T"
}
],
"W": [
{
"name": "武汉",
"key": "W"
},
{
"name": "乌鲁木齐",
"key": "W"
},
{
"name": "无锡",
"key": "W"
},
{
"name": "威海",
"key": "W"
},
{
"name": "潍坊",
"key": "W"
},
{
"name": "文山",
"key": "W"
},
{
"name": "温州",
"key": "W"
},
{
"name": "乌海",
"key": "W"
},
{
"name": "芜湖",
"key": "W"
},
{
"name": "乌兰察布",
"key": "W"
},
{
"name": "武威",
"key": "W"
},
{
"name": "梧州",
"key": "W"
}
],
"X": [
{
"name": "厦门",
"key": "X"
},
{
"name": "西安",
"key": "X"
},
{
"name": "西宁",
"key": "X"
},
{
"name": "襄樊",
"key": "X"
},
{
"name": "湘潭",
"key": "X"
},
{
"name": "湘西",
"key": "X"
},
{
"name": "咸宁",
"key": "X"
},
{
"name": "咸阳",
"key": "X"
},
{
"name": "孝感",
"key": "X"
},
{
"name": "邢台",
"key": "X"
},
{
"name": "新乡",
"key": "X"
},
{
"name": "信阳",
"key": "X"
},
{
"name": "新余",
"key": "X"
},
{
"name": "忻州",
"key": "X"
},
{
"name": "西双版纳",
"key": "X"
}
,
{
"name": "宣城",
"key": "X"
},
{
"name": "许昌",
"key": "X"
},
{
"name": "徐州",
"key": "X"
},
{
"name": "香港",
"key": "X"
},
{
"name": "锡林郭勒",
"key": "X"
},
{
"name": "兴安",
"key": "X"
}
],
"Y": [
{
"name": "银川",
"key": "Y"
},
{
"name": "雅安",
"key": "Y"
},
{
"name": "延安",
"key": "Y"
},
{
"name": "延边",
"key": "Y"
},
{
"name": "盐城",
"key": "Y"
},
{
"name": "阳江",
"key": "Y"
},
{
"name": "阳泉",
"key": "Y"
},
{
"name": "扬州",
"key": "Y"
},
{
"name": "烟台",
"key": "Y"
},
{
"name": "宜宾",
"key": "Y"
},
{
"name": "宜昌",
"key": "Y"
},
{
"name": "宜春",
"key": "Y"
},
{
"name": "营口",
"key": "Y"
},
{
"name": "益阳",
"key": "Y"
},
{
"name": "永州",
"key": "Y"
}
,
{
"name": "岳阳",
"key": "Y"
},
{
"name": "榆林",
"key": "Y"
},
{
"name": "运城",
"key": "Y"
},
{
"name": "云浮",
"key": "Y"
},
{
"name": "玉树",
"key": "Y"
},
{
"name": "玉溪",
"key": "Y"
},
{
"name": "玉林",
"key": "Y"
}
],
"Z": [{
"name": "杂多县",
"key": "Z"
},
{
"name": "赞皇县",
"key": "Z"
},
{
"name": "枣强县",
"key": "Z"
},
{
"name": "枣阳市",
"key": "Z"
},
{
"name": "枣庄",
"key": "Z"
},
{
"name": "泽库县",
"key": "Z"
},
{
"name": "增城市",
"key": "Z"
},
{
"name": "曾都区",
"key": "Z"
},
{
"name": "泽普县",
"key": "Z"
}
,
{
"name": "泽州县",
"key": "Z"
},
{
"name": "札达县",
"key": "Z"
},
{
"name": "扎赉特旗",
"key": "Z"
},
{
"name": "扎兰屯市",
"key": "Z"
},
{
"name": "扎鲁特旗",
"key": "Z"
},
{
"name": "扎囊县",
"key": "Z"
},
{
"name": "张北县",
"key": "Z"
}
,
{
"name": "张店区",
"key": "Z"
},
{
"name": "章贡区",
"key": "Z"
},
{
"name": "张家港",
"key": "Z"
},
{
"name": "张家界",
"key": "Z"
},
{
"name": "张家口",
"key": "Z"
},
{
"name": "漳平市",
"key": "Z"
},
{
"name": "漳浦县",
"key": "Z"
},
{
"name": "章丘市",
"key": "Z"
},
{
"name": "樟树市",
"key": "Z"
},
{
"name": "张湾区",
"key": "Z"
},
{
"name": "彰武县",
"key": "Z"
},
{
"name": "漳县",
"key": "Z"
},
{
"name": "张掖",
"key": "Z"
},
{
"name": "漳州",
"key": "Z"
},
{
"name": "长子县",
"key": "Z"
},
{
"name": "湛河区",
"key": "Z"
},
{
"name": "湛江",
"key": "Z"
},
{
"name": "站前区",
"key": "Z"
},
{
"name": "沾益县",
"key": "Z"
},
{
"name": "诏安县",
"key": "Z"
},
{
"name": "召陵区",
"key": "Z"
},
{
"name": "昭平县",
"key": "Z"
},
{
"name": "肇庆",
"key": "Z"
},
{
"name": "昭通",
"key": "Z"
},
{
"name": "赵县",
"key": "Z"
}
]
}]
}
module.exports = city;
一键获取完整项目代码
javascript
浙公网安备 33010602011771号