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