地图控件 最后更新时间: 2024年06月28日

本文介绍常用的地图控件，包括地图工具条、比例尺、定位、鹰眼和图层切换，并介绍了实现这些控件的两种方式：

• 使用 JS API 地图基础控件
• 通过 UI 组件库进行自定义实现

1、准备

2、地图基础控件

通过插件的方式可以添加地图基础控件。地图控件包括工具条、比例尺、定位、鹰眼、图层切换、控制罗盘六种控件。

2.1 创建地图

const map = new AMap.Map("container", {
  zoom: 10, //地图级别
  center: [116.397428, 39.90923], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});

2.2 同时引入工具条插件、比例尺插件和鹰眼等插件

推荐异步加载方式，在需要的地方引入。通过AMap.plugin方法按需引入控件，在plugin回调之后使用控件功能。

AMap.plugin(
  [
    "AMap.ToolBar",
    "AMap.Scale",
    "AMap.HawkEye",
    "AMap.MapType",
    "AMap.Geolocation",
    "AMap.ControlBar",
  ],
  function () {
    //添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
    map.addControl(new AMap.ToolBar());

    //添加比例尺控件，展示地图在当前层级和纬度下的比例尺
    map.addControl(new AMap.Scale());

    //添加鹰眼控件，在地图右下角显示地图的缩略图
    map.addControl(new AMap.HawkEye({ isOpen: true }));

    //添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    map.addControl(new AMap.MapType());

    //添加定位控件，用来获取和展示用户主机所在的经纬度位置
    map.addControl(new AMap.Geolocation());

    //添加控制罗盘控件，用来控制地图的旋转和倾斜
    map.addControl(new AMap.ControlBar());
  }
);

3、UI 组件库实现地图基础控件

JS API 的 UI 组件库通过 BasicControl 提供了一些基础地图控件。目前包括：

• 缩放控件BasicControl.Zoom；
• 图层切换控件BasicControl.LayerSwitcher；
• 交通图控件BasicControl.Traffic。

3.1 引入 AMapUI

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  AMapLoader.load({
    key: "「你申请的应用Key」", //申请好的 Web 端开发者 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //加载 AMapUI
    AMapUI: {
      version: "1.1", // AMapUI 版本
    },
  }).then((AMap) => {
    const map = new AMap.Map("container");
  });
</script>

<script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>

3.2 加载 BasicControl 并添加缩放和图层切换控件

AMapUI.loadUI(["control/BasicControl"], function (BasicControl) {
  //添加一个缩放控件
  map.addControl(
    new BasicControl.Zoom({
      position: "lt", //left top，左上角
    })
  );

  //缩放控件，显示 Zoom 值
  map.addControl(
    new BasicControl.Zoom({
      position: "lb", //left bottom, 左下角
      showZoomNum: true, //显示zoom值
    })
  );

  //图层切换控件
  map.addControl(
    new BasicControl.LayerSwitcher({
      position: "rt", //right top，右上角
      theme: "my-red", //主题样式 my-red 为 css 的 class 名
    })
  );
});

.amap-ui-control-theme-my-red {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: red;
  color: #fff;
}