示例中心
功能在线体验
控制台

地图基础功能

  • 地图显示 使用AMap.Map类创建和展示地图对象。
  • 英文、中英文地图 本示例展示了如何显示英文地图,以及在中英文地图之间切换。
  • 带功能控件的地图 给地图添加比例尺、缩放工具条、鹰眼等控件
  • 异步加载地图 给JSAPI引用地址url加上callback参数,异步调用JSAPI接口。
  • 根据城市名称设置中心点 用map.setCity(xx)可以通过中文城市名、adcode、citycode等设置地图的中心点
  • 改变地图中心点及缩放级别 setCenter改变地图中心点、setZoom改变地图级别
  • 地图平移 除了鼠标、触摸交互,通过map.panBy和map.panTo也可以移动地图
  • 设置地图状态 通过map.setStatus修改地图的可拖拽、可缩放等状态
  • 限制地图显示范围 setBounds可以设置当前显示范围;setLimitBounds可以限制地图的显示范围
  • 获取地图当前所在的行政区 使用map.getCity获取地图当前中心所在行政区。
  • 获取地图缩放级别 map.getZoom可获取地图当前的缩放级别。
  • 鼠标点击获取经纬度 给地图绑定click时间,获取鼠标位置的经纬度坐标。
  • 地图热点 通过isHotspot开启地图的热点功能
  • 设置地图上鼠标样式 使用Map.setDefaultCursor设置地图默认的鼠标样式,用于自定义地图等场景。

自定义地图样式

  • 自定义地图 指定Map.mapStyle属性,实现自定义样式地图。
  • 标准样式模版 使用Map.setMapStyle方法,加载高德提供的模版样式。
  • 设置地图显示内容 使用Map.setFeatures方法,定制地图显示的元素类别

三维地图

  • 3D地图 本示例使用AMap.Map类及其viewMode属性创建和展示一个3D地图,在支持webgl的浏览器有效。
  • 棱柱体 使用Prism类型创建和展示朝阳区的棱柱体,并给地图设置光照,实现三维地块的展示。
  • Mesh 通过给Object3D.Mesh的实例设定各种三维描述信息,实现三维物体的展示。
  • 模型变换 使用Object3D类型的position和rotateZ等方法可对三维对象进行模型变换,本例模拟了雷达扫描的实现。
  • MeshLine 通过设置Object3D.MeshLine的相关属性,展示3D线段。
  • Mesh纹理 通过给Object3D.Mesh的实例设定纹理及纹理坐标,实现三维物体的纹理贴图。
  • Mesh接受光照 使用Object3D.MeshAcceptLights类的实例,创建和展示可接受光照的三维物体
  • 三维模型 利用Three.js的OBJLoader2加载OBJ模型文件,将产出的Three.Mesh对象转换为AMap.Mesh对象展示,模拟楼盘周边配套的展示场景。
  • 3D热力图 当Map的视图模式为3D时,热力图也将展示为3D效果。
  • 3D室内地图 当Map的视图模式为3D时,室内地图也将展示为3D效果。

高德官方图层

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

三方标准图层

自有数据图层

  • 图片图层 使用ImageLayer加载图片图层,可用于景区导览图等场景。
  • 热力图 使用Heatmap添加热力图到地图上,适用于做热力、数据分析等场景。
  • 自定义图层 使用CustomLayerDistrictSearch,创建自定义图层。适用于标准图层无法满足需求的场景。
  • img作为切片 使用TileLayer.Flexible.createTile自定义图片图层,可用于添加水印等场景。
  • Canvas作为切片 使用TileLayer.Flexible.createTile将canvas作为切片渲染到地图上,适用于需要自定义切片的场景。
  • 视频图层 使用VideoLayer创建视频图层,适用于需要在地图上放置视频的场景
  • Canvas图层 使用CanvasLayer在地图上添加canvas图层。

点标记

  • 点标记 通过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方法,将右键菜单的操作打开关联到其它覆盖物对象上。

矢量图形

工具类

  • 拉框放大地图 使用MouseTool.rectZoomIn实现放大选中的地图区域效果,用于区域缩放等场景。
  • 距离测量 使用RangingTool测量地图上两点间实际记录,可用于线上地图距离量取等场景。
  • 面积测量 使用MouseTool.measureArea在地图上绘制多边形,获取多边形区域面积,可用于利用线上地图做面积量取等场景。
  • 鼠标绘制点线面 使用MouseTool在地图上绘制marker, polyline和polygon。

事件系统

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

坐标变换

几何计算库

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

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 直接对路径规划的结果进行驾车路线可视化展示

货车路线规划

  • 位置经纬度 + 货车路线规划 使用 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,逆地理编码,根据经纬度获取详细地址信息。

行政区划查询

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

调起高德地图

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

室内地图

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

定位

  • 地图初始加载定位到当前城市 初始化Map时,默认展示用户当前城市。
  • 浏览器定位 使用Geolocation.getCurrentPosition获取当前位置,可用于依赖于于用户定位的场景。
  • IP定位获取当前城市信息 使用CitySearch.getLocalCity根据IP定位城市,适用于PC端以及GPS信号不佳的场景。
  • 自定义定位图标 使用Toolbar.doLocation实现浏览器定位,结合Marker自定义用户位置显示。

我的数据

天气预报

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

UI - 简单标注

  • 自定义图标 使用SimpleMarker,实现自定义图标的简单Marker的展示。
  • 自定义文字 使用SimpleMarker,实现自定义图标上的文字的功能。
  • 内置样式 使用SimpleMarker的内置样式。
  • 定位点 使用SimpleMarker,指定其锚点的位置。
  • 纯色背景 使用SimpleMarker,设置为纯色背景。
  • 更新图标和文字 使用SimpleMarker.setIconLabel更新图标和文字。
  • 图标主题 使用SimpleMarker,展示不同主题的图标。

UI - 字体图标标注

  • 字体样式 使用AwesomeMarker,展示awesomeIcon。
  • 图标样式 使用AwesomeMarker,多样的图标样式。
  • 设置awesomeIcon 使用AwesomeMarker使用awesomeIcon属性设置awesomeIcon。
  • 自定义FontAwesome资源 使用AwesomeMarker,展示如何使用自定义FontAwesome资源。

UI - 矢量标注

  • 各类形状 使用SvgMarker自定义各类矢量形状。
  • 自定义路径 使用SvgMarker自定义路径。
  • 自定义形状 使用SvgMarker自定义形状。
  • 使用Iconfont 使用SvgMarker,将Iconfont作为图标。
  • 水滴 使用SvgMarker实现水滴状的图标效果。
  • 调节Shape属性 使用SvgMarker,通过setSvgShape修改标记样式。

UI - 简单信息窗体

  • 覆盖默认的dom结构 使用SimpleInfoWindow,本例展示如何覆盖默认的dom结构。
  • 监听事件 使用SimpleInfoWindow,本例展示如何给窗体内容绑定监听事件。
  • 简单信息窗体 使用SimpleInfoWindow实现简单信息窗体。
  • 使用模板 使用SimpleInfoWindow,自定义信息窗体的内容展示模板。

UI - 标注列表

  • 完整示例 使用MarkerList实现标注列表的完整示例。
  • 事件监听 使用MarkerList的事件监听。
  • 选中样式的控制 使用MarkerList,通过selectedClassNames设置选中效果。
  • Marker带Circle 使用MarkerList,实现展示marker的时候同时展示一个circle的功能。
  • 自定义选中后的行为 使用MarkerList,自定义选中后的行为。
  • 搜索+分页 使用MarkerList实现搜索+分页的效果。
  • selectedClassNames 使用MarkerList实现selected-classnames效果。
  • 简单数据渲染 使用MarkerList演示如何进行简单的数据渲染。
  • SimpleMarker&SimpleWindow 使用MarkerList,组合使用SimpleMarker&SimpleWindow。
  • 使用SvgMarker MarkerList下使用SvgMarker。

UI - 基础控件

  • 自定义主题 自定义缩放(Zoom),图层切换(LayerSwitcher),交通图控件(Traffic)的样式。
  • 基础控件 BasicControl(基础控件)包括:缩放控件(BasicControl.Zoom),图层切换控件(BasicControl.LayerSwitcher),交通图控件(BasicControl.Traffic)。
  • 图层切换控件 图层切换控件(BasicControl.LayerSwitcher),自定义图层组合。
  • 实时交通控件 交通图层控件(BasicControl.Traffic)。
  • 缩放控件 缩放控件(BasicControl.Zoom),可自定义样式、位置等。

UI - 海量点展示

  • 调整绘制样式 PointSimplifier支持调整样式配置,展示各种不同样式的海量点效果。
  • 调整TopN选取 使用PointSimplifier配置renderOptions.getNumForTopSelect,显示不同topN配置下的海量点效果。
  • 动态改样式 使用PointSimplifier结合动画展示不同样式下的海量点效果。
  • 自定义绘制内容 使用PointSimplifier.renderOptions自定义海量点的不同元素样式
  • 自定义绘制引擎 通过修改PointSimplifier.renderNormalPoints方法重新定制绘制引擎。
  • 样式分组引擎 使用PointSimplifier.Render.Canvas.GroupStyleRender实现样式分组效果。
  • 图片内容 使用PointSimplifier.Render.Canvas.getImageContent在海量点上显示图片内容。
  • 海量点展示 使用PointSimplifier展示海量点。
  • 图标分组 使用PointSimplifier.Render.Canvas.GroupStyleRender展示在海量点上做图标分组。
  • 点选取漏斗 使用PointSimplifier展现点选取漏斗效果。
  • 闪烁效果 使用PointSimplifier.renderOptions.groupStyleOptions展示带闪烁效果的海量点。

UI - 轨迹展示

  • 简单路径 展示PathSimplifier的基本接口的使用方法。
  • 调整巡航器样式 PathSimplifier用来展示点数较多的轨迹,createPathNavigator可以创建巡航器沿轨迹移动。
  • 调整线、点样式 通过PathSimplifier.renderEngine.setOption和setOptions可以设置线路的样式。
  • 省域边界 使用PathSimplifier展示省市边界,通过renderOptions属性设置不同边界样式。
  • 动态修改巡航器 动态修改PathSimplifier.createPathNavigator得到的巡航器实例的样式。
  • 动态延展路径 通过setData修改PathSimplifier的路径,实现只展示部分路径的效果。
  • 轨迹展示&巡航 展示PathSimplifier及其巡航器的创建和使用。
  • 轨迹巡航控制 展示PathSimplifier的巡航器的各种使用和控制接口,如速度、启动、暂停、停止等。
  • 仅展示驶过线 通过pathLinePassedStyle属性控制PathSimplifier巡航器已经驶过部分的线路样式。
  • 简单数据附加 给PathSimplifier路径的节点附加数据,并展示。

UI - 行政区划浏览

  • 事件处理 DistrictExplorer下的各类事件的处理方法。
  • 行政区分组 使用DistrictExplorer实现行政区分组。
  • 行政区浏览 使用DistrictExplorer实现行政区浏览。
  • 区域定位 使用DistrictExplorer实现根据位置获取所在地的行政区域信息。
  • 多区域加载 使用DistrictExplorer实现多区域加载。
  • 反向镂空区域 使用DistrictExplorer实现反向镂空区域效果。
  • 单区域加载 使用DistrictExplorer实现单区域加载。

UI - 行政区划聚合

  • 区划聚合 使用DistrictCluster实现按照行政区划聚合大量点信息的展示。
  • 点击后显示聚合标注 使用DistrictCluster实现点击后显示聚合标注的效果。
  • 定制聚合信息标注 使用DistrictCluster实现定制聚合信息标注。
  • 自定义绘制引擎 使用DistrictCluster实现行政区面的自定义绘制。
  • 事件支持 使用DistrictCluster的事件支持。
  • 排除部分区划 使用DistrictCluster排除部分区划。
  • 区划面样式 使用DistrictCluster,实现区划面样式的设置。
  • 各地美食 使用DistrictCluster,本例模拟了各地美食的展示场景。
  • 点击后展示海量点 使用DistrictCluster实现点击某行政区后,展示区域内海量点的效果。
  • 区划聚合+海量点展示 使用DistrictCluster实现区划聚合+海量点展示。
  • 设置顶级区划 使用DistrictCluster,设置想要展示的区划范围。

UI - 拖拽选址

  • 拖拽选址 使用PositionPicker组件实现拖拽地图或者拖拽Marker选址。
  • 自定义图标 自定义PositionPicker的选点标记的样式。

UI - POI选点

  • 输入框选择POI点 使用PoiPicker.suggest实现输入提示和选点的功能。
  • POI搜索 使用PoiPicker.searchByKeywords实现POI搜索的功能。

Loca - 位置可视化

  • 全国省会及直辖市 使用点(point)类型数据绘制圆形(circle)标记。
  • 在已有地图上创建 在已有AMap地图上创建Loca
  • 全国市县数据 全国市县数据(圆形)标记
  • 设置图形标记 - 天气预报 点数据设置图片标记
  • 线类型 北京公交网 北京公交路网
  • 线类型 城市链接
  • 线类型 国内航线图 国内航线线路图
  • 小区及楼块图 面数据 - 北京望京附近小区及楼块图
  • 街道区块图 面类型 - 北京部分街道区块图
  • 动态样式 - 回调函数 通过回调函数动态设置图形属性。
  • 动态样式 - 自动映射 圆形半径(radius)线性映射震级大小(mag),即圆形半径大小和震级高低成正比。
  • 设置半径长度单位 设置圆形半径单位为 "米" 和 "像素"
  • 普通热力图 普通热力图
  • 蜂窝热力图 蜂窝热力图
  • 矩形热力图 矩形热力图
  • 行政区热力图 全国部分知名景区,按所在行政区聚合后的热力图。
  • 鼠标事件 鼠标 Click 事件,配合信息气泡。

Loca - 3D 位置可视化

  • 3D 圆形标注 全国市县数据(圆形)3D 标注
  • 3D 曲线链接 3D 模式下的全国省会连线。3D 模式下的线暂时不支持设置线宽。
  • 3D 区面类型 3D 模式下的北京各区行政边界。3D 面类型,暂时不支持边框颜色及宽度的设置。
  • 3D 基本热力图 立体基本类型热力图,使用「高度」及「颜色」表示热力值大小。
  • 3D 蜂窝热力图 立体蜂窝热力图,使用「高度」及「颜色」表示热力值大小。
  • 3D 矩形热力图 立体矩形热力图,使用「高度」及「颜色」表示热力值大小。
  • 3D 行政区热力图 全国部分知名景区,按所在行政区聚合后的立体热力图,使用「高度」及「颜色」表示热力值大小。
移动端
示例中心
功能
在线体验
常见问题