全部服务产品
开发者频道
定价
登录

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版

覆盖物

地图覆盖物概述

所有叠加或覆盖到地图的内容,我们统称为地图覆盖物。如标注、矢量图形元素(包括:折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标,当您拖动或缩放地图时,它们会相应的移动。

百度地图Flash API提供了如下几种覆盖物:

Overlay:覆盖物的抽象基类,所有的覆盖物均继承此类的方法。

Marker:标注表示地图上的点,可自定义标注的图标。

Label:表示地图上的文本标注,您可以自定义标注的文本内容。

Polyline:表示地图上的折线。

Polygon:表示地图上的多边形。多边形类似于闭合的折线,另外您也可以为其添加填充颜色。

Circle: 表示地图上的圆。

InfoWindow:信息窗口也是一种特殊的覆盖物,它可以展示更为丰富的文字和多媒体信息。注意:同一时刻只能有一个信息窗口在地图上打开。

可以使用map.addOverlay方法向地图添加覆盖物,使用map.removeOverlay方法移除覆盖物,注意此方法不适用于InfoWindow。

文本

文本覆盖物是添加到地图上的一段文本。可以设置文本的内容,样式和背景。Label可以设置position属性指定Label的地理坐标,offset属性可以设置Label位置的偏移量。

下面的示例向地图添加了一个文本,并修改了文本样式和背景。

// 定义新的背景
var bg:Sprite = new Sprite();
bg.graphics.beginFill(0x0000ff, 0.7);
bg.graphics.drawRect(0, 0, 100, 100);
bg.graphics.endFill();
 
var label:Label = new Label("测试文字");
label.position = new LngLat(116.404, 39.85);
label.contentStyle = new TextFormat("宋体", 14, 0xff0000, true);
label.background = bg;
map.addOverlay(label);

标注

标注表示地图上的点。API提供了默认图标样式,您也可以通过设置Marker对象的icon属性来指定自定义图标。

Marker可以设置position属性指定Marker的地理坐标,offset属性可以设置Marker位置的偏移量。

下面的示例向地图中心点添加了一个标注,并使用默认的标注样式。

var marker:Marker = new Marker();
marker.position = new LngLat(116.404, 39.915);
map.addOverlay(marker);

定义标注图标

Marker的icon属性接受任何DisplayObject对象,通过设置icon属性可实现自定义标注的图标。如下示例:

var marker:Marker = new Marker();
marker.position = new LngLat(116.404, 39.915);
// 新建一个Sprite作为icon
var newicon:Sprite = new Sprite();
newicon.graphics.beginFill(0x0000ff, 1);
newicon.graphics.moveTo(0, 10);
newicon.graphics.lineTo(10, 0);
newicon.graphics.lineTo(20, 10);
newicon.graphics.lineTo(30, 0);
newicon.graphics.lineTo(40, 10);
newicon.graphics.lineTo(20, 30);
newicon.graphics.lineTo(0, 10);
// 修改icon
marker.icon = newicon;
map.addOverlay(marker);

可拖拽的标注

marker的enableDragging属性可以用来开启和关闭标注的拖拽功能。默认情况下标注不支持拖拽,您需要调用marker.enableDragging()方法来开启拖拽功能。在标注开启拖拽功能后,您可以监听标注的dragend事件来捕获拖拽后标注的最新位置。

marker.enableDragging();

信息窗口

信息窗口在地图上方的弹出窗口。您可以使用InfoWindow来创建一个信息窗实例,注意同一时刻地图上只能打开一个信息窗口。

下面的示例打开了一个使用默认样式的InfoWindow。

var infowindow:InfoWindow = new InfoWindow("内容内容内容内容内容", null, "标题", null);
map.openInfoWindow(infowindow);

几何对象覆盖物

Circle、Polyline和Polygon是几何对象覆盖物。分别表示圆、折线和多边形。可以使用不同的绘制样式来改变几何覆盖物的外观。


添加圆

下面的示例添加了一个圆形覆盖物。

// 创建圆形覆盖物
var circle:Circle = new Circle(new LngLat(116.404, 39.915), 14000);
// 设置圆形覆盖物的样式
circle.symbol = new CircleSymbol(0xff00ff, 0.8, 2, 0x00ffff, 0.8);
map.addOverlay(circle);

添加折线

下面的示例添加了一个折线覆盖物。

// 设置折线的坐标串
var coords:Vector.<LngLat> = new Vector.<LngLat>();
coords.push(new LngLat(116.36, 39.860));
coords.push(new LngLat(116.405, 39.920));
// 创建折线覆盖物
var polyline:Polyline = new Polyline(coords);
map.addOverlay(polyline);

添加多边形

下面的示例添加一个多边形覆盖物。

// 设置多边形的坐标串
var coords:Vector.<LngLat> = new Vector.<LngLat>();
coords.push(new LngLat(116.36, 39.860));
coords.push(new LngLat(116.405, 39.920));
coords.push(new LngLat(116.355, 39.89));
// 创建多边形覆盖物
var polygon:Polygon = new Polygon(coords);
map.addOverlay(polygon);
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消