1、地图宽高固定（整页背景）

通过ID获取地图，高度随窗口变化而变化

const height = window.innerHeight - 123;
const map = document.getElementById('allmap');
map.style.height = height + 'px';

2、地图初始化

<div id="allmap"></div>

	this.map = new BMap.Map('allmap', { enableMapClick: false });// 判断时候从围栏详情过来,是则不设置地图初始中心点,避免调整围栏视野后在加载调整至地图中心if (!this.isPassedValue) {this.map.centerAndZoom('青岛'); // 初始化地图,设置中心点坐标和地图级别}// this.map.enableInertialDragging();   // 两秒后开启惯性拖拽this.map.enableScrollWheelZoom(); // 启用滚轮放大缩小，默认禁用// 更改背景样式// setTimeout(() => {//   this.map.setMapStyle({ styleJson: styleJson });// }, 5000);this.toolControl();

centerAndZoom(‘青岛’,11) // 地图初始化：未初始化的地图不能进行任何操作 前面可以是点也可以是地区名称 如果是点(Point)则必须限定等级（3-19） 移动端（3-18），如果是地区则可忽略 触发的回调方法–load()

enableInertialDragging() // 开启惯性拖拽，默认禁用
enableScrollWheelZoom() 启用滚轮放大缩小

换底图（背景图）–过于卡顿 未成功
setMapStyle
setMapStyleV2({styleJson:样式})

2、工具条 – 比例尺：

// 工具条控件toolControl() {// 比例尺const top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(180, 110),}); // 左上角，添加比例尺this.map.addControl(top_left_control);// 缩放平移控件// const top_left_navigation = new BMap.NavigationControl();// this.map.addControl(top_left_navigation);// 平移和缩放按钮const top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT,offset: new BMap.Size(100, 100), // 偏离值});this.map.addControl(top_right_navigation);}

ScaleControl：创建比例尺
NavigationControl: 平移缩放控件
anchor:比例尺位置
declare let BMAP_ANCHOR_TOP_LEFT: any; // 左上
declare let BMAP_ANCHOR_TOP_RIGHT: any; // 右上
declare let BMAP_ANCHOR_BOTTOM_LEFT: any; // 左下
declare let BMAP_ANCHOR_BOTTOM_RIGHT: any; // 右下
offset: 偏移值 要使用 new BMap.Size();转化 上下/左右 不过偏移后会有阴影尽量不要做偏移

3、缩略图、混合图

// 地图、混合地图const mapType = new BMap.MapTypeControl({// BMAP_HYBRID_MAP// mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP],anchor: BMAP_ANCHOR_TOP_RIGHT,type: BMAP_MAPTYPE_CONTROL_HORIZONTAL,});this.map.addControl(mapType);// 默认关闭的缩略图  右下角有个小箭头const overView = new BMap.OverviewMapControl();this.map.addControl(overView);// 打开的缩略图const overViewOpen = new BMap.OverviewMapControl({isOpen: true,anchor: BMAP_ANCHOR_BOTTOM_LEFT,});this.map.addControl(overViewOpen);

MapTypeControl：创建缩略图
anchor：设置控件停靠的位置 设置控件停靠位置
BMAP_ANCHOR_BOTTOM_RIGHT 右下 其他的类似
offset: 偏移量Size类型
isOpen：是否打开

4、地图类型切换–点击事件触发

// 切换地图类型 卫星、三维setMapType(type: number) {switch (type) {case 1:// 地图this.map.setMapType(BMAP_NORMAL_MAP);break;case 2:// 卫星this.map.setMapType(BMAP_SATELLITE_MAP);break;case 3:// 混合图this.map.setMapType(BMAP_HYBRID_MAP);break;default:break;}}

5、定位控件

// 定位控件locationControl() {// 添加带有定位的导航控件,就是缩放控件+定位按钮const navigationControl = new BMap.NavigationControl({// 靠左上角位置anchor: BMAP_ANCHOR_TOP_LEFT,// LARGE类型type: BMAP_NAVIGATION_CONTROL_LARGE,// 启用显示定位enableGeolocation: true,});this.map.addControl(navigationControl);// 添加定位控件const geolocationControl = new BMap.GeolocationControl();geolocationControl.addEventListener('locationSuccess', (e: any) => {// 定位成功事件let address = '';address += e.addressComponent.province;address += e.addressComponent.city;address += e.addressComponent.district;address += e.addressComponent.street;address += e.addressComponent.streetNumber;alert('当前定位地址为：' + address);});geolocationControl.addEventListener('locationError', (e: any) => {// 定位失败事件alert(e.message);});this.map.addControl(geolocationControl);}

NavigationControl 此类是地图的平移缩放控件，可以对地图上下左右四个方向平移和缩放。
enableGeolocation:控件是否继承定位功能 使用H5浏览器定位功能
GeolocationControl：创建特定样式的地图定位控件：如下
选项-GeolocationControlOptions：
anchor
offset
showAddressBar(是否显示定位信息面板)
enableAutoLocation(添加控件时是否进行定位)
locationIcon(自定义图标)
定位成功事件：locationSuccess 失败事件：locationError

6、第三方版权控件

// 第三方版权控件thirdControl() {const cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_RIGHT }); // 设置版权控件位置this.map.addControl(cr); // 添加版权控件const bs = this.map.getBounds(); // 返回地图可视区域cr.addCopyright({id: 1,content:'<a href="#" style="font- size: 20px; background: yellow">中瑞glcrm</a>',bounds: bs,});// Copyright(id,content,bounds)类作为CopyrightControl.addCopyright()方法的参数}

可以在地图上添加自己的版权信息。每一个版权信息需要包含如下内容：版权的唯一标识、版权内容和其适用的区域范围。
CopyrightControl.addCopyright()：包含以上三部分
id: 版权信息的唯一标识
content：版权信息的文本内容，支持HTML
bounds：该版权信息所适用的地理区域 Bounds类型
Bounds(sw,ne):基础类，创建一个给定点坐标的矩形区域，
参数：1、sw,西南角 2、ne,东北角 Point

7、城市列表控件

CityListControl 城市列表控件
事件：
onChangeBefore ：切换城市之前事件
onChangeAfter：切换城市之后事件
onChangeSuccess(e)：切换城市成功之后的事件 e为城市的地址编号等