CityListControl

地图城市选择控件。 默认按钮宽度随城市名称变化,高度为 32px;展开后的展开城市面板尺寸为 400px × 455px 提供全国的省份、城市选择列表,可方便用户切换地图显示省份、城市。 anchor 属性表示按钮的停靠位置。 顶部停靠时列表向下展开,底部停靠时列表向上展开。 按钮停靠在左侧时,列表与按钮左对齐;停靠在右侧时,列表与按钮右对齐。

构造函数

  • 创建城市选择控件实例

    参数类型说明
    opts 可选CityListControlOptions可选配置参数
    属性类型说明
    anchorControlAnchor控件的停靠位置
    canCheckSizeboolean是否检查地图容器尺寸,容器过小时不展示控件
    expandboolean是否初始展开城市列表
    offsetSize控件基于停靠位置的偏移量
    onChangeAfterFunction切换城市后触发的回调函数
    onChangeBeforeFunction切换城市前触发的回调函数
    onChangeSuccessFunction切换城市成功后触发的回调函数,控件初始化完成后也会触发一次,可在回调中获取当前城市名
    onCloseFunction城市列表面板收起时的回调函数
    onOpenFunction城市列表面板展开时的回调函数
    triggerHTMLElement自定义触发元素,用于替代默认的城市切换按钮。自定义元素按钮可以方便您统一页面样式。 传入一个 DOM 元素后,点击该元素即可展开/收起城市列表。如需动态修改自定义触发按钮的文案,可通过回调函数实现。

    返回值 CityListControl

    示例代码1

    const cityListControl = new BMap.CityListControl({
    anchor: BMAP_ANCHOR_TOP_LEFT,
    offset: new BMap.Size(10, 10),
    expand: false,
    canCheckSize: false,
    onChangeBefore: () => { console.log('切换城市前'); },
    onChangeAfter: () => { console.log('切换城市后'); },
    onChangeSuccess: () => { console.log('切换城市成功'); },
    });
    map.addControl(cityListControl);

属性

控件默认停靠位置,自定义控件时需提供此属性

控件默认偏移量,自定义控件时需提供此属性

方法

  • 收起城市列表面板

    返回值 void

  • 返回当前城市名称

    返回值 string

  • 返回城市列表的触发元素;控件尚未初始化时返回 undefined

    返回值 HTMLElement

  • 隐藏控件

    返回值 void

  • 抽象生命周期方法,用于初始化控件,当调用 map.addControl() 时内部将调用此方法。

    仅在自定义控件时需要实现此方法,并返回控件的 DOM 元素,DOM 元素需通过 map.getContainer() 添加到地图容器中。 内置控件(ZoomControlScaleControl 等)已在内部实现,用户无需调用也无需重写。

    参数类型说明
    mapMap地图实例

    返回值 HTMLElement

    示例代码1

    class MyControl extends BMap.Control {
    initialize(map: BMap.Map) {
    const div = document.createElement('div');
    div.textContent = '自定义控件';
    map.getContainer().appendChild(div);
    return div;
    }
    }
  • 返回控件的可见状态

    返回值 boolean

  • 展开城市列表面板

    返回值 void

  • 设置控件停靠位置

    参数类型说明
    anchorControlAnchor停靠位置

    返回值 void

    示例代码2

    control.setAnchor(BMAP_ANCHOR_TOP_LEFT);
    
  • 设置控件停靠偏移量

    参数类型说明
    offsetSize偏移量

    返回值 void

    示例代码3

    control.setOffset(new BMap.Size(20, 20));
    
  • 显示控件

    返回值 void

  • 切换城市列表面板的展开状态

    返回值 void