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

Posted 2020-09-29

最近在用腾讯地图的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)