开发 地图 JS API 2.0 进阶教程 控件和弹窗 地图控件

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

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

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

1、准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

2、地图基础控件

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

提示

如果你没有使用过 JS API 控件,可以前往 控件基础教程

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
提示

实现基础地图控件可以使用 JS API 自带的功能,它可以满足基本展示需求;若需高级自定义配置,如样式、交互等,可以引入 UI 组件库来实现

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>
提示

本例使用 JS API Loader 来加载,如果你使用同步方式加载,可以参考此代码

<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 名
    })
  );
});
提示

定义css(通过.amap-ui-control-theme-my-red类定义样式)

.amap-ui-control-theme-my-red {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  background: red;
  color: #fff;
}
返回顶部 示例中心 常见问题 智能客服 公众号
二维码