JS API UI 组件示例

加载

  • 使用 AMapLoader 加载 AMapUI AMapJSAPILoaderhtml,body,#container{height:100%;width:100%;m

简单标注

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

字体图标标注

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

矢量标注

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

简单信息窗体

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

标注列表

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

基础控件

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

海量点展示

  • 调整绘制样式 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展示带闪烁效果的海量点。

轨迹展示

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

行政区划浏览

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

行政区划聚合

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

拖拽选址

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

POI选点

  • 输入框选择POI点 使用PoiPicker.suggest实现输入提示和选点的功能。
  • POI搜索 使用PoiPicker.searchByKeywords实现POI搜索的功能。
返回顶部 示例中心 常见问题 智能客服 公众号
二维码