CityListControl
构造函数
创建城市选择控件实例
参数 类型 说明 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
get Anchor
返回控件停靠位置
返回值 ControlAnchor
返回当前城市名称
返回值 string
get Offset
返回控件停靠偏移量
返回值 Size
返回城市列表的触发元素;控件尚未初始化时返回 undefined
返回值 HTMLElement
hide
- hide(): void
隐藏控件
返回值 void
initialize
抽象生命周期方法,用于初始化控件,当调用 map.addControl() 时内部将调用此方法。
仅在自定义控件时需要实现此方法,并返回控件的 DOM 元素,DOM 元素需通过 map.getContainer() 添加到地图容器中。 内置控件(
ZoomControl、ScaleControl等)已在内部实现,用户无需调用也无需重写。参数 类型 说明 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;
}
}
is Visible
- isVisible(): boolean
返回控件的可见状态
返回值 boolean
展开城市列表面板
返回值 void
set Anchor
set Offset
show
- show(): void
显示控件
返回值 void
切换城市列表面板的展开状态
返回值 void
地图城市选择控件。 默认按钮宽度随城市名称变化,高度为 32px;展开后的展开城市面板尺寸为 400px × 455px 提供全国的省份、城市选择列表,可方便用户切换地图显示省份、城市。
anchor属性表示按钮的停靠位置。 顶部停靠时列表向下展开,底部停靠时列表向上展开。 按钮停靠在左侧时,列表与按钮左对齐;停靠在右侧时,列表与按钮右对齐。