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

地图控件 最后更新时间: 2023年05月15日

本章介绍地图工具条、比例尺、定位、鹰眼、基本图层切换等常用的控件:

  1. 地图基础控件
  2. UI组件库实现地图基础控件

准备

成为开发者并创建 key

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

地图基础控件

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

1

创建地图

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

同时引入工具条插件,比例尺插件和鹰眼插件

AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.HawkEye',
    'AMap.MapType',
    'AMap.Geolocation',
], 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());
});

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

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

  • 缩放控件 (BasicControl.Zoom)
  • 图层切换控件 (BasicControl.LayerSwitcher)
  • 交通图控件 (BasicControl.Traffic)
示例
中心
常见
问题
智能
客服