示例中心
功能在线体验
控制台

高德 开发 地图 JS API 参考手册 - UI组件库 其他组件 城市选择器

更新时间:2018年07月02日

MobiCityPicker是一个手机端的城市选择器,默认情况下,会从左侧滑入打开城市列表,用户点击选中某个城市后,回调返回相应的城市信息。


如何使用 

1、引入UI组件库

2、MobiCityPicker依赖Zepto,请参见这里确定是否需要进行DomLibrary设置。

3、加载MobiCityPicker(模块名:ui/misc/MobiCityPicker):



//设置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();
});

接口文档

构造参数

参数名称

类型

说明

topGroups

Array

头部显示的城市列表数组,结构如下:

[
  //第一个分组
  {
      id: 'g1',//分组ID,需唯一
      title: '热门城市',//分组标题
      anchorTitle: '热',//右侧锚点标题,通常单个字符
      adcodes: [ //城市的adcode列表,adcodes信息可以调用MobiCityPicker.getCityData()获取
          "110000",
      ]
  },
  //第二个分组
  //{ ... }
]

topGroups设置示例adcodes信息列表

theme

String

主题样式,内置 light(默认) 和 dark 两种. 城市列表的dom容器上会附加同样名称的的class,可以据此编写css进行自定义设置(参见下方的自定义主题)

内置主题示例自定义主题示例

方法

方法名称

返回值

说明

show()


显示城市列表

hide()


隐藏城市列表

事件

事件名称

参数

说明

citySelected

cityInfo

某个城市被选中; cityInfo信息示例:

{
    "adcode": "110000",
    "name": "北京市",
    "spell": "Beijing",
    "lng": 116.405285,
    "lat": 39.904989,
    "areaCode": "010"
}

show


城市列表显示

hide


城市列表隐藏

自定义主题

比如创建一个名字为"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;
}

示例

移动端
示例中心
功能
在线体验
常见问题