城市选择器 最后更新时间: 2021年01月22日
//设置DomLibrary
AMapUI.setDomLibrary(Zepto);
//加载MobiCityPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
AMapUI.loadUI(['misc/MobiCityPicker'], function(MobiCityPicker) {
var cityPicker = new MobiCityPicker({
//topGroups: ..., // 顶部城市列表
});
//监听城市选中事件
cityPicker.on('citySelected', function(cityInfo) {
//隐藏城市列表
cityPicker.hide();
//选中的城市信息
console.log(cityInfo);
});
//显示城市列表，可以用某个click事件触发
cityPicker.show();
});
接口文档
构造参数
参数名称 | 类型 | 说明 |
|---|---|---|
|
| 头部显示的城市列表数组，结构如下： [
//第一个分组
{
id: 'g1',//分组ID，需唯一
title: '热门城市',//分组标题
anchorTitle: '热',//右侧锚点标题，通常单个字符
adcodes: [ //城市的adcode列表，adcodes信息可以调用MobiCityPicker.getCityData()获取
"110000",
]
},
//第二个分组
//{ ... }
]
|
|
| 主题样式，内置 |
方法
方法名称 | 返回值 | 说明 |
|---|---|---|
| 显示城市列表 | |
| 隐藏城市列表 |
事件
事件名称 | 参数 | 说明 |
|---|---|---|
|
| 某个城市被选中; cityInfo信息示例: {
"adcode": "110000",
"name": "北京市",
"spell": "Beijing",
"lng": 116.405285,
"lat": 39.904989,
"areaCode": "010"
}
|
| 城市列表显示 | |
| 城市列表隐藏 |
自定义主题
比如创建一个名字为"red"的主题：
var cityPicker = new MobiCityPicker({
theme:'red'//设置theme值
});
theme参数将作为一个class添加到城市列表的容器上, 即（div.amap-ui-mobi-city-picker.red），据此编写对应的样式，比如：
/**
* 列表容器背景/前景配色
*/
.amap-ui-mobi-city-picker.red {
background: red;
color: #fff;
}
/**
* 分组标题栏背景
*/
.amap-ui-mobi-city-picker.red .listgroup .title,
.amap-ui-mobi-city-picker.red .city_fixed_title {
background-color: #521717;
}
