百度地图开发探索 angular7地图原始宽高固定、初始化、工具条/比例尺、缩略图/混合图，地图类型切换（卫星、三位、混合）、定位/版权/城市列表控件

本文链接：https://blog.csdn.net/m0_48030026/article/details/109314790

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