騰訊地圖圓形覆蓋物添加移除以及標註偏移問題總結

最近在用騰訊地圖的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)