示例中心
功能在线体验
控制台
地图 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设置/获取地图显示范围
  • 获取鼠标点击经纬度 给地图绑定click事件,获取鼠标位置的经纬度坐标。
  • 地图的热点 通过isHotspot开启地图的热点功能
  • 设置鼠标样式 使用Map.setDefaultCursor设置地图默认的鼠标样式,用于自定义地图等场景。

交互与显示范围

  • 限制地图显示范围 使用setLimitBounds限制地图的显示范围
  • 地图的平移 除了鼠标、触摸交互,通过map.panBy和map.panTo也可以移动地图
  • 限定地图状态 通过map.setStatus修改地图的可拖拽、可缩放等状态

覆盖物、图层与控件

  • 地图覆盖物 使用add方法在地图上添加覆盖物
  • 地图图层 添加、删除地图图层
  • 覆盖物视野自适应 地图上覆盖物较多的情况下,如果需要保证所有覆盖物都在视野范围内, 需要将地图调整到合适的缩放等级和中心点,我们可以调用setFitView()方法,以实现该效果。
  • 地图控件 给地图添加比例尺、缩放工具条、鹰眼等控件

自定义地图样式

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

三维地图

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

事件系统

  • 地图加载完成事件 监听Map的complete事件,可在该事件回调里添加基于地图的其它逻辑代码。
  • 地图点击事件 监听Map的click事件,获取用户在地图上的点击位置信息。可用于坐标拾取等场景。
  • 覆盖物事件 监听覆盖物对象的click事件,获取用户点击了地图上哪些覆盖物信息。
  • DOM事件 在其它DOM元素的click事件里,和地图做交互操作。
  • 自定义事件 使用Map的emit和on方法,绑定和触发自定义事件。
  • 注销事件 使用Map.off注销已绑定的事件。

坐标变换

高德官方图层

  • 默认标准图层 当地图只想显示默认图层的时候,layers属性可以缺省
  • 简易行政区图-世界 简易行政区图世界图可用来展示全球所有国家和地区的分界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能 已在 1.4.10 版本正式上线
  • 简易行政区图-国家 简易行政区图国家图可用来展示任意国家和地区的的省分界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能已于 1.4.10 版本正式上线。
  • 简易行政区图-省区 简易行政区图省市区图层可用来展示任意省、市、区县的界线及区块,并支持颜色配置,可用于满足可视化数据展示。该功能已于 1.4.10 正式上线。
  • 实时路况图层 使用TileLayer.Traffic在地图上添加实时交通图,适用于显示实时交通的场景。
  • 卫星图 使用TileLayer.Satellite添加卫星图到地图上。
  • 卫星和路网 组合使用卫星图层和路网图层
  • 楼块图层 本例展示使用AMap.Buildings类型添加独立的楼块图层,楼块图层同样接收自定义样式,支持IE9以上浏览器。
  • 批量修改图层 使用LayerGroup对图层做批量修改。

三方标准图层

自有数据图层

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

室内地图

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

点标记

  • 点标记 通过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是一种可以随着地图缩放改变图标、大小的点标记,本例子模拟了简单的平面展示图,缩放地图看看吧。

信息窗体

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

右键菜单

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

矢量图形

  • 跨日期线绘制 通过LngLat的第三个参数可以使经纬度延伸到 [-180, 180] 区间之外,可解决跨日期限的绘制问题
  • 折线、多边形、圆 使用 target="_blank">Polyline, target="_blank">Polygon, target="_blank">Circle在地图上绘制线、面和圆形。
  • 矩形及其编辑 使用RectangleRectangleEditor在地图上创建矩形及对其做编辑操作。
  • 椭圆及其编辑 使用EllipseEllipseEditor在地图上创建椭圆和对其做编辑操作。
  • 编辑折线、多边形、圆 使用PolyEditorCircleEditor对线、面和圆做编辑。
  • 绘制大地线 使用Polyline.geodesic在地图上绘制大地线。
  • 带洞多边形 使用Polygon在地图上绘制带洞的多边形。
  • 贝瑟尔曲线及其编辑 使用BezierCurveEditor在地图上创建贝塞尔曲线及对其做编辑操作。
  • GeoJSON 使用GeoJSON根据标注你的GeoJSON配置在地图上对应覆盖物。
  • 批量修改属性 使用OverlayGroup对地图上的覆盖物做集合操作,适用于需要对覆盖物批量处理的场景。
  • 自定义折线方向箭头 给Polyline添加dirColor属性可以设置方向箭头的颜色,添加dirImg可以设置方向箭头的图片,支持Image和Canvas。

通用接口

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

立体 Mesh

  • 不规则棱柱体 使用Prism类型创建和展示朝阳区的棱柱体,并给地图设置光照,实现三维地块的展示。
  • 基础 Mesh 通过给Object3D.Mesh的实例设定各种三维描述信息,实现三维物体的展示。
  • 给 Mesh 添加纹理 通过给 Object3D.Mesh 的实例设定纹理及纹理坐标,实现三维物体的纹理贴图。
  • 接受光照的 Mesh 使用 Object3D.MeshAcceptLights 类的实例,创建和展示可接受光照的三维物体。
  • 3D 热力图 当Map的视图模式为3D时,热力图也将展示为3D效果。
  • glTF 模型 AMap.GltfLoader 插件解析加载 glTF 模型

线 Line

  • 基础 Line Object3D.Line 用来创建基于 gl.LINES 绘制的纯粹的线样式的三维图形。
  • MeshLine 通过设置 Object3D.MeshLine 的相关属性,展示3D线段。

点 Points

  • 点 Points Object3D.Points是基于gl.POINTS绘制的一种三维图形,支持颜色、大小、纹理
  • 圆点 RoundPoints Object3D.Points是基于gl.POINTS绘制的一种三维图形,支持颜色、大小、纹理,绘制效果为圆形点
  • 圆点&细线 本例子组合使用了Object3D.RoundPoints和Object3D.Line,实现了气球点的效果

POI搜索

  • 关键字搜索 PlaceSearch.search,根据关键字进行搜索。
  • 多关键字检索 PlaceSearch.search,同时搜索多个关键字
  • 周边搜索 PlaceSearch.searchNearBy,在中心点附近一定范围进行关键字搜索
  • 多边形搜索 PlaceSearch.searchInBounds,在多边形范围内进行关键字搜索。
  • 详情查询 PlaceSearch.getDetails,根据POIID获取某个POI的详细信息。
  • 输入提示 使用Autocomplete进行联想输入。
  • 输入提示后查询 组合使用Autocomplete和PlaceSearch进行POI搜索。
  • 关键字检索自我展示 使用PlaceSearch进行关键字搜索,下载PlaceSearchRender脚本后可自行修改展现内容和样式。

我的数据

驾车路线规划

  • 位置经纬度 + 驾车规划路线 使用 AMap.Driving 与『起终点经纬度』进行驾车路线规划
  • 地点关键字 + 驾车路线规划 使用 AMap.Driving 与『起终点名称关键字』进行驾车规划路线
  • 可拖拽驾车路线规划 使用 AMap.DragRoute 实现可拖拽途经点的驾车路线规划
  • 规划结果 + 驾车路线展示 使用 AMap.DrivingRender 直接对路径规划的结果进行驾车路线可视化展示
  • 途经点 按起终点经纬度规划路线#panel{position:fixed;background-color:white;max-

货车路线规划

  • 位置经纬度 + 货车路线规划 使用 AMap.TruckDriving 与经纬度信息进行货车路线规划
  • 地点关键字 + 货车路线规划 使用 AMap.TruckDriving 与名称关键字信息进行货车路线规划

步行路线规划

  • 位置经纬度 + 步行路线规划 使用 AMap.Walking 和 『起终点经纬度』进行步行路线规划
  • 地点关键字 + 步行路线规划 使用 AMap.Walking 和 『起终点关键字』进行步行路线规划
  • 规划结果 + 步行路线展示 使用 AMap.WalkingRender 对『步行路线规划结果数据』进行可视化展示

骑行路径规划

  • 位置经纬度 + 骑行路线规划 使用 AMap.Riding 和『起终点经纬度』进行骑行路线规划
  • 地点关键字 + 骑行路线规划 使用 AMap.Riding 和『起终点关键字』进行骑行路线规划

公交路线规划与公交查询

  • 位置经纬度 + 公交路线规划 使用 AMap.Transfer 和『起终点经纬度』进行公交路线规划
  • 地点关键字 + 公交路线规划 使用 AMap.Transfer 和 『起终点关键字』进行公交路线规划
  • 规划结果 + 公交路线展示 使用 AMap.TransferRender 对『公交路线规划结果数据』进行可视化展示
  • 公交站点查询 使用 AMap.StationSearch 和『站点关键字』进行公交站点查询
  • 公交线路查询 使用 AMap.LineSearch 进行公交线路查询
  • 公交到达圈 通过 AMap.ArrivalRange 提供公交到达圈服务

地理编码

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

行政区划查询

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

轨迹纠偏

  • 驾车轨迹纠偏 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测量地图上两点间实际记录,可用于线上地图距离量取等场景。

几何计算库

  • 面与面的几何关系 GeometryUtil提供了面和面几何关系的计算方法,包括包含关系、相交关系以及重叠面的计算等。
  • 两点间距离 使用LngLat.distance计算两个经纬度之间的直线距离。
  • 点到线的距离 使用AMap.GeometryUtil的对应方法,获取折线上距离某点最近的位置、点到线的距离。
  • 点是否在多边形内 使用Polygon.containsAMap.GeometryUtil.isPointInRing(推荐),判断点是否在多边形内。

调起高德地图

  • 点标记 使用 markOnAMAP 调起高德地图应用
  • POI 详情 使用 poiOnAMAP 调起高德地图 POI详情
  • 驾车路径规划 使用 AMap.Driving 与 searchOnAMAP 调起高德地图应用驾车路线规划
  • 公交路径规划 使用 AMap.Transfer 和 searchOnAMAP 调起高德地图应用公交路线规划
  • 步行路线规划 使用 AMap.Walking 和 searchOnAMAP 调起高德地图应用步行路线规划
示例中心 功能
在线体验
常见问题