高德地图API中覆盖物的精准定位体系——基点+偏移量

大家在看高德地图API网站上的js api范例程序时，经常会看到代码注释中提到“基点”这个字眼，例如下面一段代码：

function addMarker(){
    //构建点对象
    var marker = new AMap.Marker({
        id:"m23",//唯一ID
        position:new AMap.LngLat(116.37388157654,39.907409934248), //基点位置
        icon:"http://api.amap.com/webapi/static/Images/marker_sprite.png", //marker图标，直接传递地址url
        offset:{x:-8,y:-34} //相对于基点的位置
    });
    mapObj.addOverlays(marker);//将点添加到地图
 
    var info = [];
    info.push("<b>  高德软件</b>");
    info.push("  电话 : 010-84107000   邮编 : 100102");
    info.push("  地址 : 北京市望京阜通东大街方恒国际中心A座16层");
     
    var inforWindow = new AMap.InfoWindow({
        offset:new AMap.Pixel(45,-34),
        content:info.join("<br />")
    });
    mapObj.bind(marker,"click",function(e){
        inforWindow.open(mapObj,marker.getPosition());
    });
}

那么什么是基点，怎么对覆盖物进行精准的定位？

　　如果我们要在地图上添加一个Marker，则其位置是一个坐标，这个坐标位置即是Marker的基点。对于弹出信息窗口（InfoWindow）来说，基点就是其需要打开的位置。对于Marker来说，要做到精确将图标放置到指定的位置，并且能够使得图标的任意位置对准基点，则需要设置offset属性，即偏移量。

　　熟悉HTML代码的网友都知道，图标（或者信息窗口）显示的时候，指定的坐标位置是与其左上角对齐的。所以要通过offset（相对于基点在x方向和y方向的偏移量）来进行精准设置。

关于偏移量设置，请看下图的示例说明：

有了“基点+偏移量”这套定位体系，大家可以根据自己的需要，任意调整覆盖物的显示位置了。

学到新知识了？快来2014高德LBS应用大赛操练起来吧！

http://2014lbs.amap.com/