首页 > 代码库 > 腾讯地图圆形覆盖物添加移除以及标注偏移问题总结

腾讯地图圆形覆盖物添加移除以及标注偏移问题总结

最近在用腾讯地图的api,对遇到的问题和解决方法做个总结(可能有不正确的地方)

1.初始化地图

// 地图 定义可能要用到的标注,圆形覆盖物等,由于多个,所以都用数组
var searchService,markers = [],lables = [],markerIndex=0,map,circles = [];
//初始化地图函数 自定义函数名init function initMap(con) { //定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器 map = new qq.maps.Map(document.getElementById(con), { center: new qq.maps.LatLng(39.916527,116.397128), zoom:13 }); //调用Poi检索类 searchService = new qq.maps.SearchService({ map:map });
.....
}

2.添加圆形覆盖物

           ...

//处于循环中,每个center0的数据从后台来
var center0=new qq.maps.LatLng(xxx,yyy);
map.setCenter(center0);
//设置圆形覆盖物的颜色和透明度rgba var circle_color = new qq.maps.Color( Number(colorarr[0]), Number(colorarr[1]), Number(colorarr[2]), alpha); //给地图添加圆形覆盖物 var circle = new qq.maps.Circle({ center:center0, radius:radius, //边框大小 strokeWeight:0, //填充颜色 fillColor:circle_color, //放置到哪个地图中 map: map }); //添加到circles数组中,以便后续操作 circles.push(circle); ...

3.添加标注marker

          ...

//处于循环中,每个center0的数据从后台来
var center0=new qq.maps.LatLng(xxx,yyy);
map.setCenter(center0);
//设置标注的样式 var anchor = new qq.maps.Point(16, 40), size = new qq.maps.Size(35, 40), origin = new qq.maps.Point(0, 0), icon = new qq.maps.MarkerImage(‘img/xxx.png‘, size, origin, anchor); //给地图添加标注 var marker0 = new qq.maps.Marker({ position:center0, icon: icon, map: map, }); //添加标注到数组中,以便后续操作 markers.push(marker0); ...

4.添加文本标注

          ...

//处于循环中,每个center0的数据从后台来
var center0=new qq.maps.LatLng(xxx,yyy);
map.setCenter(center0);
//设置标注的样式
var cssC = {
       fontSize:"14px",
       borderRadius: "20px",
       border: 0,
       padding: "5px 10px 5px 40px",
       boxShadow:"1px 1px 3px #ccc",
};
//给地图添加文本标注
var label = new qq.maps.Label({
      position: center0,
      offset: new qq.maps.Size(-13, -35),
      map: map,
      content:"xxx"
});

//添加样式
label.setStyle(cssC);
//添加到数组中
lables.push(label);

         ...

5.删除覆盖物(圆形覆盖物,标注,文本标注)

//清除覆盖物的函数
function clearOverlays(overlays) {
      var overlay;
      while (overlay = overlays.pop()) {
             overlay.setMap(null);
      }
}
...
//使用的时候调用
clearOverlays(circles);
clearOverlays(markers);
clearOverlays(lables);

//如果是清除单个覆盖物
circle.setMap(null);
lable.setMap(null);
maker.setMap(null);

//如果是添加单个覆盖物
circle.setMap(map);
lable.setMap(map);
maker.setMap(map);

6.关于缩放地图时,标注的位置偏移圆形覆盖物的问题

//在你设置marker时,设置anchor就好了
//首先你要知道你使用的marker的图片大小,比如32x40
//那么设置anchor(宽度的一半,高度)
var anchor = new qq.maps.Point(16, 40);

//由于图形标注变化了,那么文本标注的位置也要改动
//修改label中的offset值,这个值根据自己需求改动
//offset: 相对于position位置偏移值,x方向向右偏移为正值,y方向向下偏移为正值,反之为负。
offset: new qq.maps.Size(xx, yy)

 

腾讯地图圆形覆盖物添加移除以及标注偏移问题总结