示例中心
功能在线体验
控制台
地图 JS API 示例中心

生命周期

  • 地图的创建 使用AMap.Map类创建和展示地图对象。
  • 地图加载完成 地图加载完成事件 map.on("complete")
  • 地图的销毁 地图的销毁 map.destroy
  • 异步加载地图 给JSAPI引用地址url加上callback参数,异步调用JSAPI接口。

地图属性

  • 中、英文地图 英文地图显示,英文、中英文、中文地图之间动态切换
  • 获取地图中心点/级别 map.getCenter()获取地图中心点;map.getZoom获取地图缩放级别
  • 设置地图中心点/级别 setCenter改变地图中心点、setZoom改变地图级别
  • 获取地图当前行政区 使用map.getCity获取地图当前中心所在行政区。
  • 设置地图当前行政区 用map.setCity(xx)可以通过中文城市名、adcode、citycode等设置地图的中心点
  • 设置/获取地图显示范围 通过map.getBounds、map.getBounds设置/获取地图显示范围
  • 限制地图显示范围 使用setLimitBounds限制地图的显示范围
  • 地图的平移 除了鼠标、触摸交互,通过map.panBy和map.panTo也可以移动地图
  • 交互控制 通过map.setStatus修改地图的可拖拽、可缩放等状态
  • 获取鼠标点击经纬度 给地图绑定click事件,获取鼠标位置的经纬度坐标。
  • 地图的热点 通过isHotspot开启地图的热点功能
  • 设置鼠标样式 使用Map.setDefaultCursor设置地图默认的鼠标样式,用于自定义地图等场景。

覆盖物与图层管理

  • 覆盖物的添加与移除 使用add方法在地图上添加覆盖物
  • 图层的添加与移除 添加、删除地图图层
  • 地图控件 给地图添加比例尺、缩放工具条、鹰眼等控件

自定义地图样式

  • 自定义地图 指定Map.mapStyle属性,实现自定义样式地图。
  • 设定楼块样式 楼块图层的setStyle接口可以指定区域来设定建筑物的颜色。
  • 标准样式主题 使用Map.setMapStyle方法,加载高德提供的模版样式。
  • 地图显示要素 使用Map.setFeatures方法,定制地图显示的元素类别
  • 隐藏文字标注 showLabel设定为 false 隐藏文字标注

三维地图

  • 3D地图 本示例使用AMap.Map类及其viewMode属性创建和展示一个3D地图,在支持webgl的浏览器有效。
  • 固定视角 通过rotateEnable和 pitchEnable 控制地图是否可以旋转和倾斜
  • 区域掩模 通过 mask 属性为地图对象设定区域掩模,只显示区域内的图层和覆盖物
  • 三维模型 利用Three.js的OBJLoader2加载OBJ模型文件,将产出的Three.Mesh对象转换为AMap.Mesh对象展示,模拟楼盘周边配套的展示场景。
  • 3D室内地图 当Map的视图模式为3D时,室内地图也将展示为3D效果。

坐标系转换

其他坐标转高德坐标

  • 其他坐标 -> 高德坐标 使用 AMap.convertFrom() 将其他坐标转换成高德坐标。
  • 其他坐标 -> 高德坐标 (批量) 使用 AMap.convertFrom( ) 将其他坐标转换成高德坐标。

地图事件

  • 地图加载完成事件 监听Map的complete事件,可在该事件回调里添加基于地图的其它逻辑代码。
  • 室内加载完成 监听室内图层的 complete 事件,确认室内图层加载完成后执行其他操作。
  • 地图移动相关事件 绑定和解绑 Map 的 movestart、mapmove 等地图移动相关事件。
  • 地图缩放相关事件 绑定和解绑 Map 的 zoomstart、zoomend 等地图缩放相关事件。
  • 地图点击和鼠标事件 监听Map的click事件,获取用户在地图上的点击位置信息。可用于坐标拾取等场景。
  • 地图拖拽相关事件 绑定和解绑 Map 的 dragstart、dragging 等拖拽相关事件。

覆盖物事件

  • 覆盖物点击和鼠标事件 绑定和解绑覆盖物的 click、mouseover、mouseout 等点击相关事件
  • 覆盖物拖拽相关事件 绑定和解绑覆盖物的dragging 等拖拽相关事件。
  • 信息窗体打开关闭事件 监听信息窗体的 open 和 close 事件。

其他事件

  • DOM事件 在其它DOM元素的click事件里,和地图做交互操作。
  • 自定义事件 使用Map的emit和on方法,绑定和触发自定义事件。
  • 事件模拟触发 使用 emit 模拟事件触发。本例通过模拟click点击事件打开信息窗体

图层通用接口

  • 批量修改图层 使用LayerGroup对图层做批量修改。
  • 图层添加与移除 操作图层进行添加 setMap(map)、移除 setMap(null) 操作。
  • 层级设定 通过 setzIndex() 方法设置图层的层级。
  • 图层透明度 对图层进行透明度调节。setOpacity(value)。

高德官方图层

  • 默认标准图层 当地图只想显示默认图层的时候,layers属性可以缺省
  • 实时路况图层 使用TileLayer.Traffic在地图上添加实时交通图,适用于显示实时交通的场景。
  • 卫星图 使用TileLayer.Satellite添加卫星图到地图上。
  • 卫星和路网 组合使用卫星图层和路网图层
  • 楼块图层 本例展示使用AMap.Buildings类型添加独立的楼块图层,楼块图层同样接收自定义样式,支持IE9以上浏览器。

简易行政区图

  • 简易行政区图-世界 简易行政区图世界图可用来展示全球所有国家和地区的分界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能 已在 1.4.10 版本正式上线
  • 简易行政区图-中国 简易行政区图国家图可用来展示任意国家和地区的的省分界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能已于 1.4.10 版本正式上线。
  • 简易行政区图-外国 AMap.DistrictLayer.Country可以用来展示任意国家的省级行政区划
  • 简易行政区图-省区 简易行政区图省市区图层可用来展示任意省、市、区县的界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能已于 1.4.10 正式上线。
  • 图层切换 通过 setMap(map) 在切片图层上显示行政区图层。
  • 行政区拾取+修改样式 通过 getDistrictByContainerPos() 方法拾取所在位置的行政区。并且通过 setStyles() 重置行政区样式。

三方标准图层

  • 地形地图+掩模 组合使用简易行政区图-世界、自定义栅格图(地形图,来自天地图)、以及掩模功能,实现了只显示每个区域的地形图的效果。
  • WMTS 使用TileLayer.WMTS加载OGC标准的WMTS地图。
  • XYZ栅格图层 使用TileLayer.getTileUrl自定义栅格图。
  • 函数加载栅格图 使用TileLayer.getTileUrl属性,通过函数指定栅格图层的取图地址。

自有数据图层

  • 图片图层 使用ImageLayer加载图片图层,可用于景区导览图等场景。
  • 视频图层 使用VideoLayer创建视频图层,适用于需要在地图上放置视频的场景
  • Canvas图层 使用CanvasLayer在地图上添加canvas图层。
  • 热力图 使用Heatmap添加热力图到地图上,适用于做热力、数据分析等场景。
  • 3D 热力图 当Map的视图模式为3D时,热力图也将展示为3D效果。
  • 自定义图层-SVG 使用svg绘制的自定义图层CustomLayer
  • 自定义图层-Canvas 使用CustomLayer创建自定义图层,以Canvas作为绘制方式。
  • Canvas作为切片 使用TileLayer.Flexible.createTile将canvas作为切片渲染到地图上,适用于需要自定义切片的场景。
  • img作为切片 使用TileLayer.Flexible.createTile自定义图片图层,可用于添加水印等场景。

室内地图

  • 叠加室内地图 使用IndoorMap.showIndoorMap显示指定的室内地图和对应楼层信息,可用于商场、火车站等室内场景的导览图
  • 默认室内图层 使用地图对象默认的indoorMap.showIndoorMap方法,显示指定的室内地图和对应楼层信息,可用于商场、火车站等室内场景的导览图。

通用

  • 根据覆盖物调整地图范围 地图上覆盖物较多的情况下,如果需要保证所有覆盖物都在视野范围内, 需要将地图调整到合适的缩放等级和中心点,我们可以调用setFitView()方法,以实现该效果。
  • 添加一个或多个覆盖物 利用 map 的 add 方法在地图上添加一个或多个覆盖物。
  • 移除一个或多个覆盖物 利用 map 的 remove 方法,移除地图上一个或多个覆盖物。
  • 清除所有覆盖物 清除地图上所有已添加的覆盖物。
  • 获取某类覆盖物 当地图上出现多种覆盖物类型的时候,获取某类覆盖物的方式。
  • 获取某个覆盖物 利用 extData 属性给覆盖物添加 id,获取特定的覆盖物。
  • 跨日期线绘制 通过LngLat的第三个参数可以使经纬度延伸到 [-180, 180] 区间之外,可解决跨日期限的绘制问题

点标记

  • 点标记 通过icon属性创建Marker,展示添加、修改、删除Marker的接口。
  • 文本标记 用AMap.Text创建纯文本的点标记。
  • 自定义图标 使用AMap.Icon类的实例作为Marker的图标。
  • 圆点标记 使用AMap.CircleMarker创建圆点标记。
  • 自定义点标记内容 通过content属性设定Marker的显示内容。
  • 设置点标注的文本标签 通过label属性给Marker设置文本标签。
  • 自适应显示多个点标记 撞见多个Marker,通过Map.setFitView自动适配地图级别和中心,使点标记同时显示在视野内。
  • 删除多个点标记 通过Map.remove批量删除多个点标记。
  • 从多个点中删除指定点 通过Marker.setMap(null)从多个点中删除指定点标记。
  • 点聚合 使用AMap.MarkerClusterer展示大量的Marker点,可灵活设定聚合样式。
  • 设置点的拖拽效果 通过raiseOnDrag属性使得Marker在拖拽时弹起。
  • 设置点的弹跳效果 通过Marker.setAnimation设置点的弹跳效果。
  • 轨迹回放 使用Marker.moveAlong方法,使Marker沿路径移动,模拟行驶轨迹回放。
  • 加载海量点 使用MassMarks在地图上加载海量点,适合需要显示大量Marker的场景。
  • 灵活的点标记 ElasticMarker是一种可以随着地图缩放改变图标、大小的点标记,本例子模拟了简单的平面展示图,缩放地图看看吧。

覆盖物群组

  • 添加/移除 对一类覆盖物,创建覆盖物群组,从地图上添加/移除。
  • 批量修改属性 可以通过 Ovelaygroup 对覆盖物批量修改属性。

地图控件

  • 地图控件的添加和移除 给地图添加比例尺、缩放工具条、鹰眼等控件
  • 简易缩放按钮 使用简易模式下的缩放按钮。
  • 3D 控制罗盘 3D 地图模式下为地图添加控制罗盘

信息窗体

  • 默认样式信息窗体 展示创建默认样式的信息窗体,以及信息窗体的打开操作。
  • 自定义样式信息窗体 展示如何创建自定义样式的信息窗体,以及如何点击Marker打开信息窗体。
  • 信息窗体内的事件交互 展示对信息窗体内的 DOM 元素添加自定义事件的方式。
  • 带检索功能的信息窗体 使用AdvancedInfoWindow,可创建带检索功能的信息窗体,并可设置搜索功能。
  • 给多个点添加信息窗体 给多个点标记添加单击打开信息窗体的事件。

右键菜单

  • 默认右键菜单 使用ContextMenu.addItem,配置地图右键菜单选项。
  • 自定义右键菜单 设置ContextMenu.content,实现自定义样式和内容的右键菜单。
  • 覆盖物添加右键菜单 使用ContextMenu.open方法,将右键菜单的操作打开关联到其它覆盖物对象上。

矢量图形

  • 折线的绘制和编辑 使用AMap.PolylineAMap.PolyEditor插件绘制和编辑折线
  • 弧线的绘制和编辑 使用AMap.BezierCurveAMap.BezierEditor插件绘制和编辑弧线
  • 多边形的绘制和编辑 使用AMap.PolygonAMap.PolyEditor插件绘制和编辑多边形
  • 矩形的绘制和编辑 使用AMap.RectangleAMap.RectangleEditor绘制和编辑矩形
  • 圆的绘制和编辑 使用AMap.CircleAMap.CircleEditor绘制和编辑圆
  • 椭圆的绘制和编辑 使用AMap.EllipseAMap.EllipseEditor绘制和编辑椭圆
  • 绘制矢量图形 利用AMap.MouseTool绘制折线、弧线、多边形、矩形、圆形等
  • 跨日期线绘制 通过LngLat的第三个参数可以使经纬度延伸到 [-180, 180] 区间之外,可解决跨日期限的绘制问题
  • 绘制大地线 使用Polyline.geodesic在地图上绘制大地线。
  • 带洞多边形 使用Polygon在地图上绘制带洞的多边形。
  • 遮罩 通过给地图添加一个无限大的带洞多边形,实现遮罩效果,即只显示某个区域的地图
  • GeoJSON 使用GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物。
  • OverlayGroup批处理矢量图形 使用OverlayGroup对地图上的覆盖物做集合操作,适用于需要对覆盖物批量处理的场景。
  • 自定义折线方向箭头 给Polyline添加dirColor属性可以设置方向箭头的颜色,添加dirImg可以设置方向箭头的图片,支持Image和Canvas。

通用接口

  • Object3D 的添加/移除 对 Object3D 对象进行添加和移除的基本操作。
  • 模型变换 使用 Object3D 类型的 position 和 rotateZ 等方法可对三维对象进行模型变换,本例模拟了雷达扫描的实现。
  • Object3D 的拾取 使用 getObject3DByContainerPos 方法,对 Object3D 对象进行拾取。

立体 Mesh

  • 基础 Mesh 通过给Object3D.Mesh的实例设定各种三维描述信息,实现三维物体的展示。
  • 接受光照的 Mesh 使用 Object3D.MeshAcceptLights 类的实例,创建和展示可接受光照的三维物体。
  • 给 Mesh 添加纹理 通过给 Object3D.Mesh 的实例设定纹理及纹理坐标,实现三维物体的纹理贴图。
  • 不规则棱柱体 使用Prism类型创建和展示朝阳区的棱柱体,并给地图设置光照,实现三维地块的展示。
  • glTF 模型 AMap.GltfLoader 插件解析加载 glTF 模型
  • 垂面 Wall AMap.Object3D.Wall 可以用经纬度来创建一组垂直于地面的墙面

线 Line

  • 基础 Line Object3D.Line 用来创建基于 gl.LINES 绘制的纯粹的线样式的三维图形。
  • MeshLine 通过设置 Object3D.MeshLine 的相关属性,展示3D线段。
  • 细线 ThinLine AMap.Object3D.ThinLine可以利用经纬度路径来绘制细线

点 Points

  • 带高度的点 Object3D.Points 是基于 gl.POINTS 绘制的一种三维图形,支持颜色、大小、纹理
  • 无高度的点 Object3D.Points 是基于 gl.POINTS 绘制的一种三维图形,支持颜色、大小、纹理
  • 圆点 RoundPoints Object3D.Points 是基于 gl.POINTS 绘制的一种三维图形,支持颜色、大小、纹理,绘制效果为圆形点
  • 气球 本例子组合使用了Object3D.RoundPoints和Object3D.Line,实现了气球点的效果
  • 带纹理的点 为 Points 类型添加纹理。使用 textures、vertexUVs 和 textureIndices 属性。

输入提示

  • 获取输入提示数据 使用 Autocomplete 获取输入提示信息。
  • 输入提示 使用Autocomplete进行联想输入。

POI搜索

  • 获取搜索数据 使用 AMap.PlaceSearch 获取搜索信息。
  • 关键字搜索 PlaceSearch.search,根据关键字进行搜索。
  • 多关键字检索 PlaceSearch.search,同时搜索多个关键字
  • 周边搜索 PlaceSearch.searchNearBy,在中心点附近一定范围进行关键字搜索
  • 多边形搜索 PlaceSearch.searchInBounds,在多边形范围内进行关键字搜索。
  • 详情查询 PlaceSearch.getDetails,根据POIID获取某个POI的详细信息。
  • 输入提示后查询 组合使用Autocomplete和PlaceSearch进行POI搜索。
  • 根据搜索结果添加 marker 使用 PlaceSearch 进行关键字搜索。

我的数据

驾车路线规划

  • 位置经纬度 + 驾车规划路线 使用 AMap.Driving 与『起终点经纬度』进行驾车路线规划
  • 地点关键字 + 驾车路线规划 使用 AMap.Driving 与『起终点名称关键字』进行驾车规划路线
  • 位置经纬度 + 获取驾车规划数据 通过AMap.Driving的search方法获取驾车规划数据
  • 规划结果 + 驾车路线绘制 使用AMap.Driving获取规划数据后,自定义绘制规划路线
  • 规划结果 + 驾车路线展示 使用 AMap.DrivingRender 直接对路径规划的结果进行驾车路线可视化展示
  • 可拖拽驾车路线规划 使用 AMap.DragRoute 实现可拖拽途经点的驾车路线规划
  • 途经点 按起终点经纬度规划路线

货车路线规划

  • 位置经纬度 + 货车路线规划 使用 AMap.TruckDriving 与经纬度信息进行货车路线规划
  • 地点关键字 + 货车路线规划 使用 AMap.TruckDriving 与名称关键字信息进行货车路线规划
  • 位置经纬度 + 获取货车规划数据 使用AMap.TruckDriving的search获取路线规划数据
  • 规划结果 + 货车路线绘制 使用AMap.TruckDriving的search方法获取规划数据后自定义绘制

步行路线规划

  • 位置经纬度 + 步行路线规划 使用 AMap.Walking 和 『起终点经纬度』进行步行路线规划
  • 地点关键字 + 步行路线规划 使用 AMap.Walking 和 『起终点关键字』进行步行路线规划
  • 规划结果 + 步行路线展示 使用 AMap.WalkingRender 对『步行路线规划结果数据』进行可视化展示
  • 规划结果 + 步行路线绘制 使用AMap.Walk获取规划路线并自定义绘制
  • 位置经纬度 + 获取步行规划数据 使用AMap.Walk的search方法获取步行规划数据

骑行路径规划

  • 位置经纬度 + 骑行路线规划 使用 AMap.Riding 和『起终点经纬度』进行骑行路线规划
  • 地点关键字 + 骑行路线规划 使用 AMap.Riding 和『起终点关键字』进行骑行路线规划
  • 位置经纬度 + 获取骑行规划数据 使用AMap.Riding的search方法获取规划数据
  • 规划结果 + 骑行路线绘制 使用AMap.Riding获取规划数据并自定义绘制

公交路线规划

  • 位置经纬度 + 公交路线规划 使用 AMap.Transfer 和『起终点经纬度』进行公交路线规划
  • 地点关键字 + 公交路线规划 使用 AMap.Transfer 和 『起终点关键字』进行公交路线规划
  • 位置经纬度 + 获取公交规划数据 使用AMap.Transfer的search方法获取规划数据
  • 规划结果 + 公交路线展示 使用 AMap.TransferRender 对『公交路线规划结果数据』进行可视化展示
  • 规划结果 + 公交路线绘制 使用AMap.Transfer获取规划数据并自定义绘制

地理编码

  • 地理编码(地址 -> 坐标) Geocoder.getLocation,使用地理编码接口,根据地址转获取经纬度位置。
  • 批量地理编码 Geocoder插件支持批量地理编码查询,将多个地址一次转换为经纬度。
  • 逆地理编码(坐标 -> 地址) Geocoder.getAddress,逆地理编码,根据经纬度获取详细地址信息。
  • 批量逆地理编码 Geocoder插件支持批量逆地理编码,可以一次查询多个经纬度的地址。

行政区划查询

  • 行政区边界查询 使用DistrictSearch.search获取某个行政区的边界信息,并绘制行政区划边界。
  • 下属行政区查询 使用DistrictSearch逐级别依次搜索下级行政区的信息,并生成下拉列表。

公交信息查询

  • 公交站点查询 使用 AMap.StationSearch 和『站点关键字』进行公交站点查询
  • 公交线路查询 使用 AMap.LineSearch 进行公交线路查询
  • 公交到达圈 通过 AMap.ArrivalRange 可获取通过公交出行方式,一定时间内可以到达的的范围

轨迹纠偏

  • 驾车轨迹纠偏 GraspRoad的驾车轨迹纠偏接口可以将偏离道路的轨迹路径纠正到道路上

定位

  • IP城市定位 使用CitySearch.getLocalCity可根据IP进行城市级定位,获得用户当前所在城市信息,适用于PC端以及GPS信号不佳的场景。
  • 地图初始IP城市定位 Map实例初始化时,不设定center时,API 将根据用户 IP 自动匹配地图中心点到用户所在城市的中心
  • 浏览器精确定位 使用Geolocation.getCurrentPosition获取当前位置,可用于依赖于于用户定位的场景。
  • 浏览器精确定位-定位点自定义 通过给Geolocation设定相关属性,可以自定义定位按钮、定位点和精度圆的显示样式以及是否显示

天气预报

  • 天气预报 使用Weather插件,获取指定地区的天气信息,可用于天气查询等场景。

工具类

  • 鼠标工具-绘制覆盖物 使用MouseTool可以在地图上绘制Marker、Polyline、Polygon和Circle。
  • 鼠标工具-拉框缩放 使用MouseTool可实现放大/缩小选中地图区域效果,用于区域缩放等场景。
  • 鼠标工具-距离面积测量 使用MouseTool封装了RagingTool的测距功能,同时提供了 measureArea 面积测量功能
  • 测距工具 使用RangingTool测量地图上两点间实际记录,可用于线上地图距离量取等场景。

辅助库

  • 浏览器环境 当前浏览器环境的一些通用检测结果可以通过 AMap.Browser 获取
  • 颜色转换 Util封装了颜色值格式转换、requestAnimFrame封装、数组元素删除等常用工具方法。颜色值格式转换接口可以方便地取得canvas或者webgl绘制需要的颜色格式。

调起高德地图

  • 点标记 使用 markOnAMAP 调起高德地图应用
  • POI 详情 使用 poiOnAMAP 调起高德地图 POI详情
  • 驾车路径规划 使用 AMap.Driving 与 searchOnAMAP 调起高德地图应用驾车路线规划
  • 公交路径规划 使用 AMap.Transfer 和 searchOnAMAP 调起高德地图应用公交路线规划
  • 步行路线规划 使用 AMap.Walking 和 searchOnAMAP 调起高德地图应用步行路线规划

距离/面积计算

关系判断

其他

  • 三角拆分 使用 AMap.GeometryUtil.triangulateShape 方法,对几何图形进行三角拆分。
  • 路径是否顺时针 使用 AMap.GeometryUtil.isClockwise ,判断路径是否为顺时针。
示例中心 功能
在线体验
常见问题