地图覆盖物

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

     腾讯地图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 指定圆形内部的填充颜色。

这篇文章对您解决问题是否有帮助?

已解决
未解决