react-native开发实例之城市选择组件
2016-12-16 本文已影响6025人
sleepforests
城市切换对于地域相关的app使用较多，通常结合定位城市、热门城市、最近选择城市和全部城市列表进行列表展示，另外还提供搜索功能。比较典型的是美团的这个城市选择组件，截图如下。
Paste_Image.png
Paste_Image.png
效果图
1111.gif
使用到的开源项目
- https://github.com/crazycodeboy/react-native-easy-toast
- https://github.com/oblador/react-native-vector-icons
几点问题
- 还没有开发搜索功能，这部分可以本地过滤然后单独的组件展示，也可以远程过滤实时查询
- 定位、最近访问城市、热门城市没有加入到右边的index条中，这部分比较麻烦，主要是需要对两种不同的数据显示不一样的style，后面考虑继续开发试试
- 定位功能需要后台支持，这部分目前还不知道怎么做
- 数据量交大的时候有点卡，可能需要一个loading的界面
- 我的代码里面出现了3次componentDidMount，分别是读取http接口数据、读取本地json数据和自己mock的几条简单数据，可以分别看看，另外关于ListView控件的row和section如果不清楚可以看看相关文档
- 页面回退用到的一个this.props.nav是通过外面的Navigator导航组件传递进来的
核心代码如下
Header.js
'use strict';
import React, {Component} from 'react';
import {
Alert,
View,
Text,
TextInput,
StyleSheet,
Platform,
NavigatorIOS,
TouchableOpacity,
StatusBar,
}from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
export default class Header extends Component {
_onBackBtn(e) {
this.props.nav.pop();
}
render() {
return (
<View style={styles.container}>
<StatusBar
backgroundColor="#e75404"
barStyle="light-content"
/>
<View style={[styles.cellfixed]}>
<TouchableOpacity onPress={e=>this._onBackBtn(e)}>
<FontAwesomeIcon name="chevron-left" color="#ffffff" size={20}/>
</TouchableOpacity>
</View>
<View style={styles.cell}>
<Text style={[styles.title]}>{this.props.title}</Text>
</View>
<View style={[styles.cellfixed]}>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
backgroundColor: '#e75404',
paddingTop: Platform.OS === 'ios' ? 20 : 0, // 处理iOS状态栏
height: Platform.OS === 'ios' ? 50 : 35, // 处理iOS状态栏
paddingLeft: 5,
paddingRight: 5,
paddingBottom: 10,
},
cell: {
flex: 1,
marginTop: 5,
},
title: {
fontSize: 16,
textAlign: 'center',
marginLeft: 5,
marginRight: 5,
color: '#ffffff',
},
cellfixed: {
marginTop: 5,
width: 80,
},
});
SearchBox.js
'use strict';
import React, {Component}from 'react';
import {
Alert,
View,
Text,
TextInput,
StyleSheet,
Platform,
NavigatorIOS,
TouchableOpacity,
StatusBar,
}from 'react-native';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
export default class SearchBox extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<View style={styles.inputBox}>
<View style={styles.inputIcon}>
<FontAwesomeIcon name="search" color="#8B8B90" size={20}/>
</View>
<TextInput style={styles.inputText}
underlineColorAndroid="transparent"
placeholder={'输入城市名或拼音查询'}>
</TextInput>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
marginTop: 5,
marginBottom: 5,
backgroundColor: '#ffffff',
flexDirection: 'row',
height: Platform.OS === 'ios' ? 35 : 45,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#cdcdcd',
paddingBottom:5,
},
inputBox: {
height: Platform.OS === 'ios' ? 30 : 40,
marginLeft: 5,
marginRight: 5,
flex: 1,
flexDirection: 'row',
backgroundColor: '#E6E7E8',
},
inputIcon: {
margin: Platform.OS === 'ios' ? 5 : 10,
},
inputText: {
alignSelf: 'flex-end',
marginTop: Platform.OS === 'ios' ? 0 : 0,
flex: 1,
height: Platform.OS === 'ios' ? 30 : 40,
marginLeft: 2,
marginRight: 5,
fontSize: 12,
lineHeight: 30,
textAlignVertical: 'bottom',
textDecorationLine: 'none',
},
});
index.js
'use strict';
import React, {Component}from 'react';
import {
Alert,
View,
Text,
TextInput,
StyleSheet,
Platform,
NavigatorIOS,
TouchableOpacity,
StatusBar,
ScrollView,
}from 'react-native';
import Header from '../Header';
import SearchBox from '../SearchBox';
import CityList from './CityIndexListView';
export default class SimpleSelectCity extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.container}>
<Header nav={this.props.nav} title="当前城市：北京" />
<SearchBox />
<ScrollView>
<CityList nav={this.props.nav}/>
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
backgroundColor: '#ffffff',
// paddingTop: Platform.OS === 'ios' ? 20 : 0, // 处理iOS状态栏
},
currentCity:{
backgroundColor: '#ffffff',
height: 20,
margin:5,
},
currentCityText:{
fontSize:16,
}
});
CityIndexListView.js
'use strict';
import React, {Component}from 'react';
import {
StyleSheet,
View,
WebView,
Text,
Platform,
Alert,
TouchableOpacity,
ListView,
Dimensions,
ScrollView,
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast';
const SECTIONHEIGHT = 30;
const ROWHEIGHT = 40
var totalheight = [];//每个字母对应的城市和字母的总高度
const {width, height} = Dimensions.get('window');
// const URL = 'http://xxxxxxxxx.com/api/city/list';
import DATA_JSON from './city-list.json'
var that;
export default class CityIndexListView extends Component {
constructor(props) {
super(props);
var getSectionData = (dataBlob, sectionID) => {
return sectionID;
};
var getRowData = (dataBlob, sectionID, rowID) => {
return dataBlob[sectionID][rowID];
};
this.state = {
dataSource: new ListView.DataSource({
getRowData: getRowData,
getSectionHeaderData: getSectionData,
rowHasChanged: (row1, row2) => row1 !== row2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
}),
letters: [],
};
that = this;
}
_getSortLetters(dataList) {
let list = [];
for (let j = 0; j < dataList.length; j++) {
let sortLetters = dataList[j].sortLetters.toUpperCase();
let exist = false;
for (let xx = 0; xx < list.length; xx++) {
if (list[xx] === sortLetters) {
exist = true;
}
if (exist) {
break;
}
}
if (!exist) {
list.push(sortLetters);
}
}
return list;
}
componentDidMount2() {
let dataList = {"A": ["阿里", "阿坝"], "B": ["北京", "北方"]};
let sectionIDs = Object.keys(dataList);
let rowIDs = sectionIDs.map(sectionID => {
let thisRow = [];
let count = dataList[sectionID].length;
for (let ii = 0; ii < count; ii++) {
thisRow.push(ii);
}
return thisRow;
});
this.setState({
letters: sectionIDs,
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataList, sectionIDs, rowIDs)
});
}
componentDidMount(){
let ALL_CITY_LIST = DATA_JSON.allCityList;
let HOST_CITY_LIST = DATA_JSON.hotCityList;
let letterList = this._getSortLetters(ALL_CITY_LIST);
let dataBlob = {};
ALL_CITY_LIST.map(cityJson=> {
let key = cityJson.sortLetters.toUpperCase();
if (dataBlob[key]) {
let subList = dataBlob[key];
subList.push(cityJson);
} else {
let subList = [];
subList.push(cityJson);
dataBlob[key] = subList;
}
});
let sectionIDs = Object.keys(dataBlob);
let rowIDs = sectionIDs.map(sectionID => {
let thisRow = [];
let count = dataBlob[sectionID].length;
for (let ii = 0; ii < count; ii++) {
thisRow.push(ii);
}
var eachheight = SECTIONHEIGHT + ROWHEIGHT * thisRow.length;
totalheight.push(eachheight);
return thisRow;
});
this.setState({
letters: sectionIDs,
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
});
// Alert.alert('读取list数据', 'sectionIDs.length=>' + sectionIDs.length + ", rowIDs.length=>" + rowIDs.length);
console.log(sectionIDs);
console.log(rowIDs);
console.log(dataBlob);
this.setState({
letters: letterList,
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
});
}
componentDidMount3() {
fetch(URL, {method: 'GET'}).then((response)=> {
if (response.ok) {
return response.json()
} else {
Alert.alert('读取list数据', '服务器错误1');
}
}).then((json)=> {
let ALL_CITY_LIST = json.allCityList;
let HOST_CITY_LIST = json.hotCityList;
let letterList = this._getSortLetters(ALL_CITY_LIST);
let dataBlob = {};
ALL_CITY_LIST.map(cityJson=> {
let key = cityJson.sortLetters.toUpperCase();
if (dataBlob[key]) {
let subList = dataBlob[key];
subList.push(cityJson);
} else {
let subList = [];
subList.push(cityJson);
dataBlob[key] = subList;
}
});
let sectionIDs = Object.keys(dataBlob);
let rowIDs = sectionIDs.map(sectionID => {
let thisRow = [];
let count = dataBlob[sectionID].length;
for (let ii = 0; ii < count; ii++) {
thisRow.push(ii);
}
var eachheight = SECTIONHEIGHT + ROWHEIGHT * thisRow.length;
totalheight.push(eachheight);
return thisRow;
});
this.setState({
letters: sectionIDs,
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
});
// Alert.alert('读取list数据', 'sectionIDs.length=>' + sectionIDs.length + ", rowIDs.length=>" + rowIDs.length);
console.log(sectionIDs);
console.log(rowIDs);
console.log(dataBlob);
this.setState({
letters: letterList,
dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
});
}).catch((error)=> {
Alert.alert('读取list数据', '服务器错误2' + error.toString());
}).done();
}
_cityNameClick(cityJson) {
//this.refs.toast.show(cityJson.name, DURATION.LENGTH_SHORT);
this.props.nav.pop();
}
_scrollTo(index, letter) {
this.refs.toast.close();
let position = 0;
for (let i = 0; i < index; i++) {
position += totalheight[i]
}
this._listView.scrollTo({
y: position
});
this.refs.toast.show(letter, DURATION.LENGTH_SHORT);
}
_renderRightLetters(letter, index) {
return (
<TouchableOpacity
key={'letter_idx_' + index}
activeOpacity={0.6}
onPress={()=> {
this._scrollTo(index, letter)
}}>
<View style={styles.letter}>
<Text style={styles.letterText}>{letter}</Text>
</View>
</TouchableOpacity>
);
}
_renderListRow(cityJson, rowId) {
return (
<TouchableOpacity
key={'list_item_' + cityJson.id}
style={styles.rowView}
onPress={()=> {
that._cityNameClick(cityJson)
}}>
<View style={styles.rowdata}>
<Text style={styles.rowdatatext}>{cityJson.name}</Text>
</View>
</TouchableOpacity>
)
}
_renderListSectionHeader(sectionData, sectionID) {
return (
<View style={ styles.sectionView }>
<Text style={styles.sectionText}>
{sectionData}
</Text>
</View>
);
}
render() {
return (
<View style={styles.container}>
<View style={styles.listContainner}>
<ListView
ref={listView => this._listView = listView}
contentContainerStyle={styles.contentContainer}
dataSource={this.state.dataSource}
renderRow={this._renderListRow}
renderSectionHeader={this._renderListSectionHeader}
enableEmptySections={true}
initialListSize={500}
/>
<View style={styles.letters}>
{this.state.letters.map((letter, index) => this._renderRightLetters(letter, index))}
</View>
</View>
<Toast
ref="toast"
position='top'
positionValue={200}
fadeInDuration={750}
fadeOutDuration={1000}
opacity={0.8}
/>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
// paddingTop: 50,
flex: 1,
flexDirection: 'column',
backgroundColor: '#F4F4F4',
// paddingTop: Platform.OS === 'ios' ? 20 : 0, // 处理iOS状态栏
},
listContainner: {
height: Dimensions.get('window').height,
marginBottom: 10
},
contentContainer: {
flexDirection: 'row',
width: width,
backgroundColor: 'white',
justifyContent: 'space-around',
flexWrap: 'wrap',
},
letters: {
position: 'absolute',
height: height,
top: 0,
bottom: 0,
right: 10,
backgroundColor: 'transparent',
justifyContent: 'flex-start',
alignItems: 'flex-start',
},
letter: {
height: height * 3.3 / 100,
width: width * 3 / 50,
justifyContent: 'center',
alignItems: 'center',
},
letterText: {
textAlign: 'center',
fontSize: height * 1.1 / 50,
color: '#e75404'
},
sectionView: {
paddingTop: 5,
paddingBottom: 5,
height: 30,
paddingLeft: 10,
width: width,
backgroundColor: '#F4F4F4',
},
sectionText: {
color: '#e75404',
fontWeight: 'bold'
},
rowView: {
height: ROWHEIGHT,
paddingLeft: 10,
paddingRight: 10,
borderBottomColor: '#F4F4F4',
borderBottomWidth: 0.5,
},
rowdata: {
paddingTop: 10,
paddingBottom: 2,
},
rowdatatext: {
color: 'gray',
width: width,
},
});
city-list.json
{
"allCityList" : [ {
"name" : "阿坝",
"spellName" : "aba",
"id" : 5780,
"fullname" : "四川/阿坝",
"sortLetters" : "a"
}, {
"name" : "阿克苏",
"spellName" : "akesudi",
"id" : 6474,
"fullname" : "新疆/阿克苏",
"sortLetters" : "a"
}, {
"name" : "阿拉善",
"spellName" : "alashanmeng",
"id" : 3862,
"fullname" : "内蒙古/阿拉善",
"sortLetters" : "a"
}, {
"name" : "阿勒泰",
"spellName" : "aletaidi",
"id" : 6542,
"fullname" : "新疆/阿勒泰",
"sortLetters" : "a"
}, {
"name" : "阿里",
"spellName" : "alidi",
"id" : 6134,
"fullname" : "西藏/阿里",
"sortLetters" : "a"
}, {
"name" : "安康",
"spellName" : "ankang",
"id" : 6248,
"fullname" : "陕西/安康",
"sortLetters" : "a"
}, {
"name" : "安庆",
"spellName" : "anqing",
"id" : 4482,
"fullname" : "安徽/安庆",
"sortLetters" : "a"
}, {
"name" : "鞍山",
"spellName" : "anshan",
"id" : 3898,
"fullname" : "辽宁/鞍山",
"sortLetters" : "a"
}, {
"name" : "安顺",
"spellName" : "anshun",
"id" : 5861,
"fullname" : "贵州/安顺",
"sortLetters" : "a"
}, {
"name" : "安阳",
"spellName" : "anyang",
"id" : 4966,
"fullname" : "河南/安阳",
"sortLetters" : "a"
}, {
"name" : "白城",
"spellName" : "baicheng",
"id" : 4041,
"fullname" : "吉林/白城",
"sortLetters" : "b"
}, {
"name" : "百色",
"spellName" : "baise",
"id" : 5527,
"fullname" : "广西/百色",
"sortLetters" : "b"
}, {
"name" : "白沙",
"spellName" : "baishalizuz",
"id" : 5582,
"fullname" : "海南/白沙",
"sortLetters" : "b"
}, {
"name" : "白山",
"spellName" : "baishan",
"id" : 4028,
"fullname" : "吉林/白山",
"sortLetters" : "b"
}, {
"name" : "白银",
"spellName" : "baiyin",
"id" : 6279,
"fullname" : "甘肃/白银",
"sortLetters" : "b"
}, {
"name" : "蚌埠",
"spellName" : "bangbu",
"id" : 4452,
"fullname" : "安徽/蚌埠",
"sortLetters" : "b"
}, {
"name" : "保定",
"spellName" : "baoding",
"id" : 3545,
"fullname" : "河北/保定",
"sortLetters" : "b"
}, {
"name" : "宝鸡",
"spellName" : "baoji",
"id" : 6169,
"fullname" : "陕西/宝鸡",
"sortLetters" : "b"
}, {
"name" : "保山",
"spellName" : "baoshan",
"id" : 5961,
"fullname" : "云南/保山",
"sortLetters" : "b"
}, {
"name" : "保亭",
"spellName" : "baotinglizu",
"id" : 5585,
"fullname" : "海南/保亭",
"sortLetters" : "b"
}, {
"name" : "包头",
"spellName" : "baotou",
"id" : 3770,
"fullname" : "内蒙古/包头",
"sortLetters" : "b"
}, {
"name" : "巴彦淖尔",
"spellName" : "bayannaoerm",
"id" : 3854,
"fullname" : "内蒙古/巴彦淖尔",
"sortLetters" : "b"
}, {
"name" : "巴音郭楞",
"spellName" : "bayinguolen",
"id" : 6501,
"fullname" : "新疆/巴音郭楞",
"sortLetters" : "b"
}, {
"name" : "巴中",
"spellName" : "bazhong",
"id" : 5770,
"fullname" : "四川/巴中",
"sortLetters" : "b"
}, {
"name" : "北海",
"spellName" : "beihai",
"id" : 5501,
"fullname" : "广西/北海",
"sortLetters" : "b"
}, {
"name" : "北京",
"spellName" : "beijing",
"id" : 6550,
"fullname" : "北京/北京",
"sortLetters" : "b"
}, {
"name" : "本溪",
"spellName" : "benxi",
"id" : 3914,
"fullname" : "辽宁/本溪",
"sortLetters" : "b"
}, {
"name" : "毕节地",
"spellName" : "bijiedi",
"id" : 5879,
"fullname" : "贵州/毕节地",
"sortLetters" : "b"
}, {
"name" : "滨州",
"spellName" : "binzhou",
"id" : 4867,
"fullname" : "山东/滨州",
"sortLetters" : "b"
}, {
"name" : "博尔塔拉",
"spellName" : "boertala",
"id" : 6520,
"fullname" : "新疆/博尔塔拉",
"sortLetters" : "b"
}, {
"name" : "沧州",
"spellName" : "cangzhou",
"id" : 3601,
"fullname" : "河北/沧州",
"sortLetters" : "c"
}, {
"name" : "长春",
"spellName" : "changchun",
"id" : 3987,
"fullname" : "吉林/长春",
"sortLetters" : "c"
}, {
"name" : "常德",
"spellName" : "changde",
"id" : 5235,
"fullname" : "湖南/常德",
"sortLetters" : "c"
}, {
"name" : "昌都",
"spellName" : "changdudi",
"id" : 6090,
"fullname" : "西藏/昌都",
"sortLetters" : "c"
}, {
"name" : "昌吉",
"spellName" : "changji",
"id" : 6511,
"fullname" : "新疆/昌吉",
"sortLetters" : "c"
}, {
"name" : "昌江",
"spellName" : "changjiangl",
"id" : 5581,
"fullname" : "海南/昌江",
"sortLetters" : "c"
}, {
"name" : "长沙",
"spellName" : "changsha",
"id" : 5174,
"fullname" : "湖南/长沙",
"sortLetters" : "c"
}, {
"name" : "长治",
"spellName" : "changzhi",
"id" : 3667,
"fullname" : "山西/长治",
"sortLetters" : "c"
}, {
"name" : "常州",
"spellName" : "changzhou",
"id" : 4309,
"fullname" : "江苏/常州",
"sortLetters" : "c"
}, {
"name" : "巢湖",
"spellName" : "chaohu",
"id" : 4526,
"fullname" : "安徽/巢湖",
"sortLetters" : "c"
}, {
"name" : "朝阳",
"spellName" : "chaoyang",
"id" : 3979,
"fullname" : "辽宁/朝阳",
"sortLetters" : "c"
}, {
"name" : "潮州",
"spellName" : "chaozhou",
"id" : 5436,
"fullname" : "广东/潮州",
"sortLetters" : "c"
}, {
"name" : "承德",
"spellName" : "chengde",
"id" : 3589,
"fullname" : "河北/承德",
"sortLetters" : "c"
}, {
"name" : "成都",
"spellName" : "chengdu",
"id" : 5630,
"fullname" : "四川/成都",
"sortLetters" : "c"
}, {
"name" : "澄迈",
"spellName" : "chengmai",
"id" : 5578,
"fullname" : "海南/澄迈",
"sortLetters" : "c"
}, {
"name" : "郴州",
"spellName" : "chenzhou",
"id" : 5257,
"fullname" : "湖南/郴州",
"sortLetters" : "c"
}, {
"name" : "赤峰",
"spellName" : "chifeng",
"id" : 3784,
"fullname" : "内蒙古/赤峰",
"sortLetters" : "c"
}, {
"name" : "池州",
"spellName" : "chizhou",
"id" : 4545,
"fullname" : "安徽/池州",
"sortLetters" : "c"
}, {
"name" : "重庆",
"spellName" : "chongqing",
"id" : 5587,
"fullname" : "重庆/重庆",
"sortLetters" : "c"
}, {
"name" : "崇左",
"spellName" : "chongzuo",
"id" : 5563,
"fullname" : "广西/崇左",
"sortLetters" : "c"
}, {
"name" : "楚雄",
"spellName" : "chuxiong",
"id" : 6031,
"fullname" : "云南/楚雄",
"sortLetters" : "c"
}, {
"name" : "滁州",
"spellName" : "chuzhou",
"id" : 4502,
"fullname" : "安徽/滁州",
"sortLetters" : "c"
}, {
"name" : "大理",
"spellName" : "dali",
"id" : 6042,
"fullname" : "云南/大理",
"sortLetters" : "d"
}, {
"name" : "大连",
"spellName" : "dalian",
"id" : 3887,
"fullname" : "辽宁/大连",
"sortLetters" : "d"
}, {
"name" : "丹东",
"spellName" : "dandong",
"id" : 3921,
"fullname" : "辽宁/丹东",
"sortLetters" : "d"
}, {
"name" : "大庆",
"spellName" : "daqing",
"id" : 4120,
"fullname" : "黑龙江/大庆",
"sortLetters" : "d"
}, {
"name" : "大同",
"spellName" : "datong",
"id" : 3651,
"fullname" : "山西/大同",
"sortLetters" : "d"
}, {
"name" : "大兴安岭",
"spellName" : "daxinganlin",
"id" : 4194,
"fullname" : "黑龙江/大兴安岭",
"sortLetters" : "d"
}, {
"name" : "达州",
"spellName" : "dazhou",
"id" : 5746,
"fullname" : "四川/达州",
"sortLetters" : "d"
}, {
"name" : "德宏",
"spellName" : "dehong",
"id" : 6055,
"fullname" : "云南/德宏",
"sortLetters" : "d"
}, {
"name" : "德阳",
"spellName" : "deyang",
"id" : 5671,
"fullname" : "四川/德阳",
"sortLetters" : "d"
}, {
"name" : "德州",
"spellName" : "dezhou",
"id" : 4846,
"fullname" : "山东/德州",
"sortLetters" : "d"
}, {
"name" : "定安",
"spellName" : "dingan",
"id" : 5579,
"fullname" : "海南/定安",
"sortLetters" : "d"
}, {
"name" : "定西",
"spellName" : "dingxidi",
"id" : 6331,
"fullname" : "甘肃/定西",
"sortLetters" : "d"
}, {
"name" : "迪庆",
"spellName" : "diqing",
"id" : 6066,
"fullname" : "云南/迪庆",
"sortLetters" : "d"
}, {
"name" : "东莞",
"spellName" : "dongwan",
"id" : 5380,
"fullname" : "广东/东莞",
"sortLetters" : "d"
}, {
"name" : "东营",
"spellName" : "dongying",
"id" : 4781,
"fullname" : "山东/东营",
"sortLetters" : "d"
}, {
"name" : "鄂尔多斯",
"spellName" : "eerduosi",
"id" : 3806,
"fullname" : "内蒙古/鄂尔多斯",
"sortLetters" : "e"
}, {
"name" : "恩施",
"spellName" : "enshi",
"id" : 5162,
"fullname" : "湖北/恩施",
"sortLetters" : "e"
}, {
"name" : "鄂州",
"spellName" : "ezhou",
"id" : 5129,
"fullname" : "湖北/鄂州",
"sortLetters" : "e"
}, {
"name" : "防城港",
"spellName" : "fangchengga",
"id" : 5506,
"fullname" : "广西/防城港",
"sortLetters" : "f"
}, {
"name" : "佛山",
"spellName" : "foshan",
"id" : 5390,
"fullname" : "广东/佛山",
"sortLetters" : "f"
}, {
"name" : "抚顺",
"spellName" : "fushun",
"id" : 3906,
"fullname" : "辽宁/抚顺",
"sortLetters" : "f"
}, {
"name" : "阜新",
"spellName" : "fuxin",
"id" : 3955,
"fullname" : "辽宁/阜新",
"sortLetters" : "f"
}, {
"name" : "阜阳",
"spellName" : "fuyang",
"id" : 4511,
"fullname" : "安徽/阜阳",
"sortLetters" : "f"
}, {
"name" : "抚州",
"spellName" : "fuzhou",
"id" : 4718,
"fullname" : "江西/抚州",
"sortLetters" : "f"
}, {
"name" : "福州",
"spellName" : "fuzhou",
"id" : 4558,
"fullname" : "福建/福州",
"sortLetters" : "f"
}, {
"name" : "甘南",
"spellName" : "gannan",
"id" : 6349,
"fullname" : "甘肃/甘南",
"sortLetters" : "g"
}, {
"name" : "赣州",
"spellName" : "ganzhou",
"id" : 4677,
"fullname" : "江西/赣州",
"sortLetters" : "g"
}, {
"name" : "甘孜",
"spellName" : "ganzi",
"id" : 5794,
"fullname" : "四川/甘孜",
"sortLetters" : "g"
}, {
"name" : "广安",
"spellName" : "guangan",
"id" : 5740,
"fullname" : "四川/广安",
"sortLetters" : "g"
}, {
"name" : "广元",
"spellName" : "guangyuan",
"id" : 5688,
"fullname" : "四川/广元",
"sortLetters" : "g"
}, {
"name" : "广州",
"spellName" : "guangzhou",
"id" : 5308,
"fullname" : "广东/广州",
"sortLetters" : "g"
}, {
"name" : "贵港",
"spellName" : "guigang",
"id" : 5516,
"fullname" : "广西/贵港",
"sortLetters" : "g"
}, {
"name" : "桂林",
"spellName" : "guilin",
"id" : 5475,
"fullname" : "广西/桂林",
"sortLetters" : "g"
}, {
"name" : "贵阳",
"spellName" : "guiyang",
"id" : 5831,
"fullname" : "贵州/贵阳",
"sortLetters" : "g"
}, {
"name" : "果洛",
"spellName" : "guoluo",
"id" : 6398,
"fullname" : "青海/果洛",
"sortLetters" : "g"
}, {
"name" : "固原",
"spellName" : "guyuan",
"id" : 6436,
"fullname" : "宁夏/固原",
"sortLetters" : "g"
}, {
"name" : "哈尔滨",
"spellName" : "haerbin",
"id" : 4056,
"fullname" : "黑龙江/哈尔滨",
"sortLetters" : "h"
}, {
"name" : "海北",
"spellName" : "haibei",
"id" : 6382,
"fullname" : "青海/海北",
"sortLetters" : "h"
}, {
"name" : "海东",
"spellName" : "haidongdi",
"id" : 6375,
"fullname" : "青海/海东",
"sortLetters" : "h"
}, {
"name" : "海口",
"spellName" : "haikou",
"id" : 5570,
"fullname" : "海南/海口",
"sortLetters" : "h"
}, {
"name" : "海南",
"spellName" : "hainan",
"id" : 6392,
"fullname" : "青海/海南",
"sortLetters" : "h"
}, {
"name" : "海西",
"spellName" : "haixi",
"id" : 6412,
"fullname" : "青海/海西",
"sortLetters" : "h"
}, {
"name" : "哈密",
"spellName" : "hamidi",
"id" : 6461,
"fullname" : "新疆/哈密",
"sortLetters" : "h"
}, {
"name" : "邯郸",
"spellName" : "handan",
"id" : 3505,
"fullname" : "河北/邯郸",
"sortLetters" : "h"
}, {
"name" : "杭州",
"spellName" : "hangzhou",
"id" : 4337,
"fullname" : "浙江/杭州",
"sortLetters" : "h"
}, {
"name" : "汉中",
"spellName" : "hanzhong",
"id" : 6223,
"fullname" : "陕西/汉中",
"sortLetters" : "h"
}, {
"name" : "亳州",
"spellName" : "haozhou",
"id" : 4540,
"fullname" : "安徽/亳州",
"sortLetters" : "h"
}, {
"name" : "漯河",
"spellName" : "he",
"id" : 4990,
"fullname" : "河南/漯河",
"sortLetters" : "h"
}, {
"name" : "鹤壁",
"spellName" : "hebi",
"id" : 4947,
"fullname" : "河南/鹤壁",
"sortLetters" : "h"
}, {
"name" : "河池",
"spellName" : "hechi",
"id" : 5544,
"fullname" : "广西/河池",
"sortLetters" : "h"
}, {
"name" : "合肥",
"spellName" : "hefei",
"id" : 4436,
"fullname" : "安徽/合肥",
"sortLetters" : "h"
}, {
"name" : "鹤岗",
"spellName" : "hegang",
"id" : 4092,
"fullname" : "黑龙江/鹤岗",
"sortLetters" : "h"
}, {
"name" : "黑河",
"spellName" : "heihe",
"id" : 4176,
"fullname" : "黑龙江/黑河",
"sortLetters" : "h"
}, {
"name" : "衡水",
"spellName" : "hengshui",
"id" : 3629,
"fullname" : "河北/衡水",
"sortLetters" : "h"
}, {
"name" : "衡阳",
"spellName" : "hengyang",
"id" : 5200,
"fullname" : "湖南/衡阳",
"sortLetters" : "h"
}, {
"name" : "和田",
"spellName" : "hetiandi",
"id" : 6465,
"fullname" : "新疆/和田",
"sortLetters" : "h"
}, {
"name" : "河源",
"spellName" : "heyuan",
"id" : 5353,
"fullname" : "广东/河源",
"sortLetters" : "h"
}, {
"name" : "菏泽",
"spellName" : "heze",
"id" : 4875,
"fullname" : "山东/菏泽",
"sortLetters" : "h"
}, {
"name" : "贺州",
"spellName" : "hezhou",
"id" : 5539,
"fullname" : "广西/贺州",
"sortLetters" : "h"
}, {
"name" : "红河",
"spellName" : "honghe",
"id" : 6013,
"fullname" : "云南/红河",
"sortLetters" : "h"
}, {
"name" : "淮安",
"spellName" : "huaian",
"id" : 4253,
"fullname" : "江苏/淮安",
"sortLetters" : "h"
}, {
"name" : "淮北",
"spellName" : "huaibei",
"id" : 4472,
"fullname" : "安徽/淮北",
"sortLetters" : "h"
}, {
"name" : "怀化",
"spellName" : "huaihua",
"id" : 5281,
"fullname" : "湖南/怀化",
"sortLetters" : "h"
}, {
"name" : "淮南",
"spellName" : "huainan",
"id" : 4460,
"fullname" : "安徽/淮南",
"sortLetters" : "h"
}, {
"name" : "黄冈",
"spellName" : "huanggang",
"id" : 5141,
"fullname" : "湖北/黄冈",
"sortLetters" : "h"
}, {
"name" : "黄南",
"spellName" : "huangnan",
"id" : 6387,
"fullname" : "青海/黄南",
"sortLetters" : "h"
}, {
"name" : "黄山",
"spellName" : "huangshan",
"id" : 4494,
"fullname" : "安徽/黄山",
"sortLetters" : "h"
}, {
"name" : "黄石",
"spellName" : "huangshi",
"id" : 5074,
"fullname" : "湖北/黄石",
"sortLetters" : "h"
}, {
"name" : "呼和浩特",
"spellName" : "huhehaote",
"id" : 3760,
"fullname" : "内蒙古/呼和浩特",
"sortLetters" : "h"
}, {
"name" : "惠州",
"spellName" : "huizhou",
"id" : 5369,
"fullname" : "广东/惠州",
"sortLetters" : "h"
}, {
"name" : "葫芦岛",
"spellName" : "huludao",
"id" : 3936,
"fullname" : "辽宁/葫芦岛",
"sortLetters" : "h"
}, {
"name" : "呼伦贝尔",
"spellName" : "hulunbeier",
"id" : 3815,
"fullname" : "内蒙古/呼伦贝尔",
"sortLetters" : "h"
}, {
"name" : "湖州",
"spellName" : "huzhou",
"id" : 4383,
"fullname" : "浙江/湖州",
"sortLetters" : "h"
}, {
"name" : "佳木斯",
"spellName" : "jiamusi",
"id" : 4159,
"fullname" : "黑龙江/佳木斯",
"sortLetters" : "j"
}, {
"name" : "吉安",
"spellName" : "jian",
"id" : 4695,
"fullname" : "江西/吉安",
"sortLetters" : "j"
}, {
"name" : "江门",
"spellName" : "jiangmen",
"id" : 5382,
"fullname" : "广东/江门",
"sortLetters" : "j"
}, {
"name" : "焦作",
"spellName" : "jiaozuo",
"id" : 4936,
"fullname" : "河南/焦作",
"sortLetters" : "j"
}, {
"name" : "嘉兴",
"spellName" : "jiaxing",
"id" : 4375,
"fullname" : "浙江/嘉兴",
"sortLetters" : "j"
}, {
"name" : "嘉峪关",
"spellName" : "jiayuguan",
"id" : 6293,
"fullname" : "甘肃/嘉峪关",
"sortLetters" : "j"
}, {
"name" : "嘉峪关",
"spellName" : "Jiayuguan",
"id" : 6556,
"fullname" : "甘肃/嘉峪关/嘉峪关",
"sortLetters" : "J"
}, {
"name" : "揭阳",
"spellName" : "jieyang",
"id" : 5440,
"fullname" : "广东/揭阳",
"sortLetters" : "j"
}, {
"name" : "吉林",
"spellName" : "jilin",
"id" : 3998,
"fullname" : "吉林/吉林",
"sortLetters" : "j"
}, {
"name" : "济南",
"spellName" : "jinan",
"id" : 4741,
"fullname" : "山东/济南",
"sortLetters" : "j"
}, {
"name" : "金昌",
"spellName" : "jinchang",
"id" : 6276,
"fullname" : "甘肃/金昌",
"sortLetters" : "j"
}, {
"name" : "晋城",
"spellName" : "jincheng",
"id" : 3680,
"fullname" : "山西/晋城",
"sortLetters" : "j"
}, {
"name" : "景德镇",
"spellName" : "jingdezhen",
"id" : 4651,
"fullname" : "江西/景德镇",
"sortLetters" : "j"
}, {
"name" : "荆门",
"spellName" : "jingmen",
"id" : 5123,
"fullname" : "湖北/荆门",
"sortLetters" : "j"
}, {
"name" : "荆州",
"spellName" : "jingzhou",
"id" : 5100,
"fullname" : "湖北/荆州",
"sortLetters" : "j"
}, {
"name" : "金华",
"spellName" : "jinhua",
"id" : 4394,
"fullname" : "浙江/金华",
"sortLetters" : "j"
}, {
"name" : "济宁",
"spellName" : "jining",
"id" : 4818,
"fullname" : "山东/济宁",
"sortLetters" : "j"
}, {
"name" : "晋中",
"spellName" : "jinzhong",
"id" : 3692,
"fullname" : "山西/晋中",
"sortLetters" : "j"
}, {
"name" : "锦州",
"spellName" : "jinzhou",
"id" : 3928,
"fullname" : "辽宁/锦州",
"sortLetters" : "j"
}, {
"name" : "九江",
"spellName" : "jiujiang",
"id" : 4660,
"fullname" : "江西/九江",
"sortLetters" : "j"
}, {
"name" : "酒泉",
"spellName" : "jiuquan",
"id" : 6314,
"fullname" : "甘肃/酒泉",
"sortLetters" : "j"
}, {
"name" : "鸡西",
"spellName" : "jixi",
"id" : 4110,
"fullname" : "黑龙江/鸡西",
"sortLetters" : "j"
}, {
"name" : "开封",
"spellName" : "kaifeng",
"id" : 4898,
"fullname" : "河南/开封",
"sortLetters" : "k"
}, {
"name" : "喀什",
"spellName" : "kashidi",
"id" : 6484,
"fullname" : "新疆/喀什",
"sortLetters" : "k"
}, {
"name" : "克拉玛依",
"spellName" : "kelamayi",
"id" : 6451,
"fullname" : "新疆/克拉玛依",
"sortLetters" : "k"
}, {
"name" : "克孜勒苏",
"spellName" : "kezilesu",
"id" : 6497,
"fullname" : "新疆/克孜勒苏",
"sortLetters" : "k"
}, {
"name" : "昆明",
"spellName" : "kunming",
"id" : 5927,
"fullname" : "云南/昆明",
"sortLetters" : "k"
}, {
"name" : "来宾",
"spellName" : "laibin",
"id" : 5556,
"fullname" : "广西/来宾",
"sortLetters" : "l"
}, {
"name" : "莱芜",
"spellName" : "laiwu",
"id" : 4830,
"fullname" : "山东/莱芜",
"sortLetters" : "l"
}, {
"name" : "廊坊",
"spellName" : "langfang",
"id" : 3618,
"fullname" : "河北/廊坊",
"sortLetters" : "l"
}, {
"name" : "兰州",
"spellName" : "lanzhou",
"id" : 6267,
"fullname" : "甘肃/兰州",
"sortLetters" : "l"
}, {
"name" : "拉萨",
"spellName" : "lasa",
"id" : 6070,
"fullname" : "西藏/拉萨",
"sortLetters" : "l"
}, {
"name" : "乐东",
"spellName" : "ledonglizuz",
"id" : 5586,
"fullname" : "海南/乐东",
"sortLetters" : "l"
}, {
"name" : "乐山",
"spellName" : "leshan",
"id" : 5707,
"fullname" : "四川/乐山",
"sortLetters" : "l"
}, {
"name" : "凉山",
"spellName" : "liangshan",
"id" : 5813,
"fullname" : "四川/凉山",
"sortLetters" : "l"
}, {
"name" : "连云港",
"spellName" : "lianyungang",
"id" : 4245,
"fullname" : "江苏/连云港",
"sortLetters" : "l"
}, {
"name" : "聊城",
"spellName" : "liaocheng",
"id" : 4858,
"fullname" : "山东/聊城",
"sortLetters" : "l"
}, {
"name" : "辽阳",
"spellName" : "liaoyang",
"id" : 3963,
"fullname" : "辽宁/辽阳",
"sortLetters" : "l"
}, {
"name" : "辽源",
"spellName" : "liaoyuan",
"id" : 4015,
"fullname" : "吉林/辽源",
"sortLetters" : "l"
}, {
"name" : "丽江",
"spellName" : "lijiang",
"id" : 5999,
"fullname" : "云南/丽江",
"sortLetters" : "l"
}, {
"name" : "临沧",
"spellName" : "lincangdi",
"id" : 5990,
"fullname" : "云南/临沧",
"sortLetters" : "l"
}, {
"name" : "临汾",
"spellName" : "linfen",
"id" : 3730,
"fullname" : "山西/临汾",
"sortLetters" : "l"
}, {
"name" : "陵水",
"spellName" : "lingshuiliz",
"id" : 5584,
"fullname" : "海南/陵水",
"sortLetters" : "l"
}, {
"name" : "临夏",
"spellName" : "linxia",
"id" : 6358,
"fullname" : "甘肃/临夏",
"sortLetters" : "l"
}, {
"name" : "临沂",
"spellName" : "linyi",
"id" : 4833,
"fullname" : "山东/临沂",
"sortLetters" : "l"
}, {
"name" : "林芝",
"spellName" : "linzhidi",
"id" : 6142,
"fullname" : "西藏/林芝",
"sortLetters" : "l"
}, {
"name" : "丽水",
"spellName" : "lishui",
"id" : 4426,
"fullname" : "浙江/丽水",
"sortLetters" : "l"
}, {
"name" : "六安",
"spellName" : "liuan",
"id" : 4532,
"fullname" : "安徽/六安",
"sortLetters" : "l"
}, {
"name" : "六盘水",
"spellName" : "liupanshui",
"id" : 5842,
"fullname" : "贵州/六盘水",
"sortLetters" : "l"
}, {
"name" : "柳州",
"spellName" : "liuzhou",
"id" : 5464,
"fullname" : "广西/柳州",
"sortLetters" : "l"
} ],
"bcode" : 0
}
