最近在用腾讯地图的api，对遇到的问题和解决方法做个总结（可能有不正确的地方）
1.初始化地图
// 地图 定义可能要用到的标注，圆形覆盖物等，由于多个，所以都用数组var searchService,markers = [],lables = [],markerIndex=0,map,circles = [];
//初始化地图函数 自定义函数名initfunction 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 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);
...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)
7
//在拖动地图时，保持maker不动来定位并显示当前的地址信息
var geocoder, map,label = null;
var map = new qq.maps.Map(document.getElementById("container"),{
center: new qq.maps.LatLng(39.916527,116.397128),
zoom: 15,
draggable: true, //设置是否可以拖拽
scrollwheel: true,
});
//地址和经纬度之间进行转换服务
geocoder = new qq.maps.Geocoder();
//获取城市列表接口设置中心点
citylocation = new qq.maps.CityService({
complete : function(result){
map.setCenter(result.detail.latLng);
}
});
//调用searchLocalCity();方法 根据用户IP查询城市信息。
citylocation.searchLocalCity();
// 创建标注
geocoder = new qq.maps.Geocoder();
var marker = new qq.maps.Marker({
map: map
});
//拖动来实现定位
qq.maps.event.addListener(map,'bounds_changed', function(){
marker.setPosition(map.getCenter());
marker.setAnimation(qq.maps.MarkerAnimation.DOWN);
markers.push(marker);
//对指定经纬度进行解析
geocoder.getAddress(map.getCenter());
if (label) {
label.setMap(null);
};
console.log(map.getCenter());
//设置服务请求成功的回调函数
geocoder.setComplete(function(result) {
var nearPois=result.detail.nearPois;
console.log(nearPois);
label = new qq.maps.Label({
position: nearPois[0].latLng,
map: map,
content:nearPois[0].name
});
$("#txt_h_id").val(G_OTHER_HOTEL_ID);
$("#txt_h_name").val(nearPois[0].name);
$('#txt_h_zuobiao').val(nearPois[0].latLng);
$("#h_name").val(nearPois[0].name);
});
//若服务请求失败，则运行以下函数
geocoder.setError(function() {
alert("出错了，请输入正确的经纬度！！！");
});
});
