地图覆盖物
覆盖物是指覆盖到地图上面的所有事物。覆盖物都有自己的地理属性,通过设置地理属性来控制覆盖物在地图中的显示位置。
腾讯地图API中的主要包括的覆盖物有:
- 标注
- 折线
- 多边形
- 圆形
- 信息窗口等
标注
如果想要标注表示地图上的点,通过腾讯地图API可以为指定标注图标显示样式,以及指定标注不同事件的相应方法,我们来看看下面几个例子:
添加标注:
var center = new qq.maps.LatLng(39.914850, 116.403765);
var map = new qq.maps.Map(
document.getElementById("container"),
{
center: center,
zoom: 13
}
);
var marker = new qq.maps.Marker({
position: center,
map: map
});
在地图实例中添加标注,通过生成类 qq.maps.Marker 的实例来生成一个标注。该类需要选项参数进行初始化,其中 position 表示标注所表示的地理坐标点。map 属性指定标注需要添加到的地图对象。当然您也可以添加一个文本标注,与上面添加方法一样。具体接口可参考qq.maps.Label。
文本标注:
var center = new qq.maps.LatLng(39.914850, 116.403765);
var map = new qq.maps.Map(
document.getElementById("container"),
{
center: center,
zoom: 13
}
);
var marker = new qq.maps.Label({
position: center,
map: map,
content:'文本标注'
});
自定义标注图标:
var anchor = new qq.maps.Point(0, 39),
size = new qq.maps.Size(42, 68),
origin = new qq.maps.Point(0, 0),
markerIcon = new qq.maps.MarkerImage(
"https://lbs.qq.com/doc/img/nilt.png",
size,
origin,
anchor
);
marker.setIcon(markerIcon);
标注可以通过设置 Marker 的 Icon 属性 来指定标注的图标显示样式。
首先通过 qq.maps.MarkerImage 方法创建一个图标样式示例。在创建 MarkerImage 实例的时候可以指定图标的图片、图标的大小、图标锚点的位置以及 CSS sprite 在整图中的位置和整图的大小。图标的大小和整图的大小是一个 Size 实例,它通过指定宽和高来初始化实例。锚点位置以及 CSS sprite 在整图中的位置是 Point 实例,通过指定距坐标原点的横纵距离来初始化。
最后通过 Marker 的 setIcon 方法来将图标样式绑定到标注上。
标注点击事件:
qq.maps.event.addListener(marker, 'click', function() {
info.open();
info.setContent('<div style="text-align:center;white-space:nowrap;'+
'margin:10px;">单击标记</div>');
info.setPosition(center);
});
在 腾讯地图API 中,标注有点击事件,用户可以通过指定标注的点击事件来指定点击图标后要执行的方法。通过调用 qq.maps.event.addListener 方法来绑定标注的不同事件以及事件的响应方法。在上面的示例中,点击地图中的标注后将弹出一个信息框。
标注拖拽事件:
marker.setDraggable(true);
在腾讯地图API中,初始化一个地图标注时,该标注默认是不响应拖拽事件的。如果要让标注能够进行拖拽,需要将 Marker 的拖拽属性设置为true ,可以通过 setDraggable 这个方法来实现。
折线
折线是地图上几个点的连线。如果想在地图上绘制一条折线,我们来看下面的例子:
添加折线覆盖物
var polyline = new qq.maps.Polyline({
path: [
new qq.maps.LatLng(39.910, 116.399),
new qq.maps.LatLng(39.920, 116.399),
new qq.maps.LatLng(39.930, 116.399)
],
strokeColor: '#000000',
strokeWeight: 10,
map
});
在地图上添加折线,可以通过生成类 qq.maps.Polyline 的实例来添加一个折线到地图。该类需要选项参数来初始化,其中,path 是一组地图上的点坐标,坐标对应折线的拐折点。然后通过设置 map 属性将 polyline 添加到相应的地图对象中。
腾讯地图API中,提供属性改变折线的显示样式:
颜色:通过 strokeColor 指定折线的颜色。
宽度:通过 strokeWeight 指定折线的宽度。
多边形
多边形是以地图上的坐标点为顶点形成的封闭图形。我们来看下面的例子:
添加多边形区域覆盖物
var polygon = new qq.maps.Polygon({
path: [
new qq.maps.LatLng(39.910, 116.399),
new qq.maps.LatLng(39.920, 116.405),
new qq.maps.LatLng(39.940, 116.430)
],
map: map
});
在地图上添加多边形,可以通过生成类 qq.maps.Polygon() 的实例来添加一个多边形到地图对象,该类需要选项参数来初始化。其中,path 是一组地图上的点坐标,坐标对应多边形的拐折点;然后通过设置 map 属性将 Polygon 添加到相应的地图对象中。
腾讯地图API中提供属性改变多边形的显示样式:
颜色:通过 strokeColor 指定多边形边线的颜色。
宽度:通过 strokeWeight 指定多边形边线的宽度。
填充色:通过 fillColor 指定多边形填充颜色。
圆形
圆形是以地图上的坐标为中心点一定长度为半径的矢量圆形。我们来看下面的例子:
添加圆形区域覆盖物
var cirle = new qq.maps.Circle({
center: new qq.maps.LatLng(39.920, 116.405),
radius: 20000,
map: map
});
在地图上添加圆形,可以通过生成类 qq.maps.Circle 的实例来添加一个圆形到地图对象。该类需要选项参数来初始化,其中 center 是地图上的点坐标,表示圆心,radius 是圆形的半径,单位是“米“。map 将圆形添加到相应的地图示例中。
腾讯地图API中提供属性改变圆形的显示样式:
颜色:通过 strokeColor 指定圆形边线的颜色。
宽度:通过 strokeWeight 指定圆形边线的宽度。
填充色:通过 fillColor 指定圆形内部的填充颜色。