地图覆盖物

覆盖物是指覆盖到地图上面的所有事物。覆盖物都有自己的地理属性,通过设置地理属性来控制覆盖物在地图中的显示位置。

腾讯地图API中的主要包括的覆盖物有:

  • 标注
  • 折线
  • 多边形
  • 圆形
  • 信息窗口等

标注

如果想要标注表示地图上的点,通过腾讯地图API可以为指定标注图标显示样式,以及指定标注不同事件的相应方法,我们来看看下面几个例子:

添加标注:

查看示例

在地图实例中添加标注,通过生成类 qq.maps.Marker 的实例来生成一个标注。该类需要选项参数进行初始化,其中 position 表示标注所表示的地理坐标点。map 属性指定标注需要添加到的地图对象。当然您也可以添加一个文本标注,与上面添加方法一样。具体接口可参考qq.maps.Label。

文本标注:

查看示例

自定义标注图标:

查看示例

标注可以通过设置 Marker 的 Icon 属性 来指定标注的图标显示样式。

首先通过 qq.maps.MarkerImage 方法创建一个图标样式示例。在创建 MarkerImage 实例的时候可以指定图标的图片、图标的大小、图标锚点的位置以及 CSS sprite 在整图中的位置和整图的大小。图标的大小和整图的大小是一个 Size 实例,它通过指定宽和高来出示话实例。锚点位置以及 CSS sprite 在整图中的位置是 Point 实例,通过制定距坐标原点的横纵距离来初始化。

最后通过 Marker 的 setIcon 方法来将图标样式绑定到标注上。

标注点击事件:

查看示例

在 腾讯地图API 中,标注有点击事件,用户可以通过指定标注的点击事件来指定点击图标后要执行的方法。通过调用 qq.maps.event.addListener 方法来绑定标注的不同事件以及事件的响应方法。在上面的示例中,点击地图中的标注后将弹出一个信息框。

标注拖拽事件:

查看示例

在腾讯地图API中,初始化一个地图标注时,该标注默认是不响应拖拽事件的。如果要让标注能够进行拖拽,需要将 Marker 的拖拽属性设置为true ,可以通过 setDraggable 这个方法来实现。

折线

折线是地图上几个点的连线。如果想在地图上绘制一条折线,我们来看下面的例子:

添加折线覆盖物

查看示例

在地图上添加折线,可以通过生成类 qq.maps.Polyline 的实例来添加一个折线到地图。该类需要选项参数来初始化,其中,path 是一组地图上的点坐标,坐标对应折线的拐折点。然后通过设置 map 属性将 polyline 添加到相应的地图对象中。

腾讯地图API中,提供属性改变折线的显示样式:

颜色:通过 strokeColor 指定折线的颜色。

宽度:通过 strokeWeight 指定折线的宽度。

多边形

多边形是以地图上的坐标点为顶点形成的封闭图形。我们来看下面的例子:

添加多边形区域覆盖物

查看示例

在地图上添加折线,可以通过生成类 qq.maps.Polygon() 的实例来添加一个多边形到地图对象,该类需要选项参数来初始化。其中,path 是一组地图上的点坐标,坐标对应折线的拐折点;然后通过设置 map 属性将 polyline 添加到相应的地图对象中。

腾讯地图API中提供属性改变多边形的显示样式:

颜色:通过 strokeColor 指定折线的颜色。

宽度:通过 strokeWeight 指定折线的宽度。

填充色:通过 fillColor 指定多边形填充颜色。

圆形

圆形是以地图上的坐标为中心点一定长度为半径的矢量圆形。我们来看下面的例子:

添加圆形区域覆盖物

查看示例

在地图上添加圆形,可以通过生成类 qq.maps.Circle 的实例来添加一个圆形到地图对象。该类需要选项参数来初始化,其中 center 是地图上的点坐标,表示圆心,radius 是圆形的半径,单位是“米“。map 将圆形添加到相应的地图示例中。

腾讯地图API中提供属性改变圆形的显示样式:

颜色:通过 strokeColor 指定圆形边线的颜色。

宽度:通过 strokeWeight 指定圆形边线的宽度。

填充色:通过 fillColor 指定圆形内部的填充颜色。