您所在的位置： &
技术分享 如何获取Dom元素的X/Y坐标(1)
技术分享 如何获取Dom元素的X/Y坐标(1)
本文和大家一起学习一下如何获取Dom元素的X/Y坐标，当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。
获取Dom元素的X/Y坐标
现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下&&注册鼠标移动事件&&捕获鼠标正键抬起&&注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法，标准语法为：
oRect=object.getBoundingClientRect(); &&
Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解：
坐标说明图1
补充一下，如果当前的元素已经超出可视区域，依然按照可视区域的左上角位置的坐标来计算，如图2
坐标说明图2
这样就可以简单的获取Dom元素在可视区里的X/Y坐标（通过left和top属性）。最后在计算上页面滚动条的偏移量就可以计算出元素在整个页面中的X/Y坐标了。页面滚动偏移量的计算在不同浏览器下有所不同，不过我们可以借鉴YUI里面方法，设计一个通用的方式：
scrollLeft=Math.max(document.documentElement.scrollLeft, &&document.body.scrollLeft); &&scrollTop=Math.max(document.documentElement.scrollTop, &&document.body.scrollTop); &
在W3C标准下document.body.scrollTop和document.body.scrollLeft都为0，所以采用了上面兼容的方式获取页面滚动条的偏移量。
内容导航&第 1 页： &第 2 页：
关于的更多文章
IE浏览器不支持很多CSS属性是出了名的，即便在支持的部分中，也
所以姑娘，让我们做一枚花见花开的程序媛。
十一归来，貌似大家都没有什么劲头。本周五，为期两天
《待字闺中：编程面试题集》集合最新最全的面试经验和
这周Windows8.1正式版发布了，不知道各位有没有去更新
本书通过丰富的案例研究示例，阐明了构建面向构件软件的最重要因素：概念、技术、规范、管理以及分析与设计过程。
本书的涵盖范
51CTO旗下网站百度地图值覆盖物初步OverLay
OverLay是一个抽象类显示在地图上方---可以用来标注建筑物
1，首先介绍几个类
OverLay 一个基类 用于标注地图建筑物-----就是一个覆盖物或者理解为一个标识
Projection 一个工具类用于将GeoPoint地球经纬度坐标转换为Point屏幕像素坐标
MapView 用于显示地图视图
标注覆盖物的基本步骤
1，写一个OverLay继承基类OverLay 并重写draw方法
&& public class MyOverLay extends
OverLay{public void draw(Canvas..MapView..boolean.)}
2,在draw中使用mapView.getProjection获取Projection并调用toFields将Geopoint转换为Point
3，使用画布Canvas.DrawText在画布上话所要标注的内容
4，在相应的地方通过mapView.getOverlays().add()自己写的OverLay的类对象传入
以上四步便完成了对应指定经纬度坐标建筑物的标注--会在转换之后的屏幕像素坐标上显示画布上的内容
实现Overlay接口--&重写draw方法--&指定坐标内容后在Canvas上画东西--&MapView添加Overlay--&显示出来
备注：显示地图时会加载Overlay并调用draw方法画出覆盖物然后显示在相应的坐标上
mapView.getOverlays().add(new MyOverLay());
public class MyOverLay extends Overlay {
&&& private
GeoPoint geoPoint = new GeoPoint((int) (39.915 * 1E6),
(116.404 * 1E6));
&&& private
Paint paint = new Paint();
//在地图上绘制overlay。
&&& public void
draw(Canvas arg0, MapView view, boolean arg2) {
super.draw(arg0, view, arg2);
//Projection接口用来在屏幕像素x/y坐标系和地球经纬度坐标系之间进行转换
//toPixels把给定的GeoPoint变换到相对于MapView左上角的屏幕像素坐标
&&& Point p =
view.getProjection().toPixels(geoPoint, null);
//定义一个坐标
arg0.drawText("天安门", p.x, p.y, paint);
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。后使用快捷导航没有帐号？
暂时没有人问过相似的问题，你可以做第一个提问题的人
查看: 1112|回复: 10
百度地图覆盖物多边形坐标点串联问题
我每点击一次，向数据库中保存坐标点。勾画一个多边形显示没问题，如果有2个多边形，那么勾画会出现串联，3天一直未解决了。请大神帮忙感激涕零。。。。
本帖子中包含更多资源
您需要登录才可以下载或查看。
& & //添加鼠标绘制工具监听事件，用于获取绘制结果
& & function showInfo(e) {
你好 楼主 ，我现在也在做这样一个项目，能否把这一块的代码 发来学习一下
坐标点起点和重点是闭环，我手动数据库中修改的
本帖最后由 wei_wang1399 于
15:54 编辑
&script type=&text/javascript&&
& & //添加鼠标绘制工具监听事件，用于获取绘制结果
& & function showInfo(e) {
& && &&&saveCoordinate(e.point.lng, e.point.lat, $(&#orgId&).val())
& & $(function () {
& && &&&$.ajax({
& && && && &type: &POST&,
& && && && &async: false,
& && && && &url: &/mapViewer/getCoordinate&,
& && && && &data: 'orgIds=' + $(&#orgIds&).val(),
& && && && &success: function (data) {
& && && && && & //callBack(data)//动态创建选择文书信息
& && && && && & createMap(data);
& && && && &}
& && &&&});
& & function createMap(data) {
& && &&&var p = [];
& && &&&$.each(data[&coordinate&], function (i, rowData) {
& && && && &p.push(new BMap.Point(rowData.lng, rowData.lat));
& && &&&});
& && &&&// 百度地图API功能
& && &&&map = new BMap.Map('map');
& && &&&var poi = new BMap.Point(108..28075);
& && &&&map.centerAndZoom(poi, 14);
& && &&&map.enableScrollWheelZoom();
& && &&&var bdary = new BMap.Boundary();
& && &&&bdary.get(&莲湖区&, function (rs) {& && & //获取行政区域
& && && && &//map.clearOverlays();& && &&&//清除地图覆盖物
& && && && &var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight: 2, strokeColor: &#ff0000&, fillColor: &&});
& && && && &var ply1 = new BMap.Polyline(p, {strokeWeight: 2, strokeColor: &#ff0000&, fillColor: &&});
& && && && &map.addOverlay(ply);&&//添加覆盖物
& && && && &map.addOverlay(ply1);&&//添加覆盖物
& && &&&});
//& && &&&map.addEventListener(&click&, showInfo);
& && &&&map.addEventListener(&click&, function(e){& &//点击事件
& && && && &if(!e.overlay){
& && && && && & showInfo(e)
& && && && &}
& && &&&})
& && &&&//& && &&&MapAddRegion();
& && &&&var styleOptions = {
& && && && &strokeColor: &red&,& & //边线颜色。
& && && && &fillColor: &red&,& && &//填充颜色。当参数为空时，圆形将没有填充效果。
& && && && &strokeWeight: 3,& && & //边线的宽度，以像素为单位。
& && && && &strokeOpacity: 0.8,& && && &&&//边线透明度，取值范围0 - 1。
& && && && &fillOpacity: 0.6,& && &//填充的透明度，取值范围0 - 1。
& && && && &strokeStyle: 'solid' //边线的样式，solid或dashed。
& && &&&};
& && &&&//实例化鼠标绘制工具
& && &&&var drawingManager = new BMapLib.DrawingManager(map, {
& && && && &isOpen: false, //是否开启绘制模式
& && && && &enableDrawingTool: true, //是否显示工具栏
& && && && &drawingToolOptions: {
& && && && && & anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
& && && && && & offset: new BMap.Size(5, 5) //偏离值
& && && && &},
& && && && &circleOptions: styleOptions, //圆的样式
& && && && &polylineOptions: styleOptions, //线的样式
& && && && &polygonOptions: styleOptions, //多边形的样式
& && && && &rectangleOptions: styleOptions //矩形的样式
& && &&&});
& && &&&drawingManager.addEventListener('overlaycomplete', overlaycomplete);
& & var overlaycomplete = function(e){
& && &&&//e.overlay.Fn坐标不固定？？？之前是e.overlay.Cm !!!
& && &&&//终极解决：使用$,如上：e.overlay.$[0].lng + & , & + e.overlay.$[0].lat
& && &&&/** e.overlay.Fn坐标的排序方式
& && && &* ┌--------------┐
& && && &* | 0 1 |
& && && &* | |
& && && &* | 3 2 |
& && && &* └--------------┘
& && && &*/
& && &&&drawingManager.close();
& && &&&for(var i = 0;i & e.overlay.$.length-1;i++){//循环打印所有标志性坐标
& && && && &/* 条件i & e.overlay.$.length-1说明：
& && && && & * 在百度地图API并不提供画图的坐标信息，这是我跟踪获得。
& && && && & * 百度地图API中记录画图的坐标点以周期计算，即由第0点坐标开始记录并回到第0点坐标。
& && && && & * 如上的矩形：$[0],$[1],$[2],$[3],$[0]。所以这里的长度需要-1。或者不减也无大碍。
& && && && & * */
& && && && &//alert(e.overlay.$.lng + & , & + e.overlay.$.lat);
& && && && &if(i&0){
& && && && && & point += &;&;
& && && && &}
& && && && &point += (e.overlay.$.lng + & , & + e.overlay.$.lat);
& && && && &saveCoordinate(e.overlay.$.lng, e.overlay.$.lat, $(&#orgId&).val())
已解决，关贴。谢谢。
本帖子中包含更多资源
您需要登录才可以下载或查看。
已解决，关贴。谢谢。
很好，也请楼主可以提供一下经验分享给大家
&script type=&text/javascript&&
& & //添加鼠标绘制工具监听事件，用于获取绘制结果
& & function showInfo(e) {
& && &&&saveCoordinate(e.point.lng, e.point.lat, $(&#orgId&).val())
& & $(function () {
& && &&&$.ajax({
& && && && &type: &POST&,
& && && && &async: false,
& && && && &url: &/mapViewer/getCoordinate&,
& && && && &data: 'orgIds=' + $(&#orgIds&).val(),
& && && && &success: function (data) {
& && && && && & createMap(data);
& && && && &}
& && &&&});
& & var map;
& & function createMap(data) {
& && &&&// 百度地图API功能
& && &&&map = new BMap.Map('map');
& && &&&var poi = new BMap.Point(108.934738, 34.28075);
& && &&&map.centerAndZoom(poi, 14);
& && &&&map.enableScrollWheelZoom();
& && &&&var bdary = new BMap.Boundary();
& && &&&bdary.get(&莲湖区&, function (rs) {& && & //获取行政区域
& && && && &//map.clearOverlays();& && &&&//清除地图覆盖物
& && && && &var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight: 2, strokeColor: &#ff0000&, fillColor: &&});
& && && && &map.addOverlay(ply);&&//添加覆盖物
& && && && &for(var i=0;i&data.length;i++){
& && && && && & var p = [];
& && && && && & var ply1;
& && && && && & for(var j=0;j&data[i].length;j++){
& && && && && && &&&p.push(new BMap.Point(data[i][j].lng, data[i][j].lat));
& && && && && & }
& && && && && & ply1 = new BMap.Polygon(p, {strokeWeight: 2, strokeColor: &#ff0000&, fillColor: &&});
& && && && && & map.addOverlay(ply1);&&//添加覆盖物
& && && && &}
& && &&&});
& && &&&map.addEventListener(&click&, showInfo)
& && &&&var styleOptions = {
& && && && &strokeColor: &red&,& & //边线颜色。
& && && && &fillColor: &red&,& && &//填充颜色。当参数为空时，圆形将没有填充效果。
& && && && &strokeWeight: 3,& && & //边线的宽度，以像素为单位。
& && && && &strokeOpacity: 0.8,& && & //边线透明度，取值范围0 - 1。
& && && && &fillOpacity: 0.6,& && &//填充的透明度，取值范围0 - 1。
& && && && &strokeStyle: 'solid' //边线的样式，solid或dashed。
& && &&&};
& && &&&//实例化鼠标绘制工具
& && &&&var drawingManager = new BMapLib.DrawingManager(map, {
& && && && &isOpen: false, //是否开启绘制模式
& && && && &enableDrawingTool: true, //是否显示工具栏
& && && && &drawingToolOptions: {
& && && && && & anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
& && && && && & offset: new BMap.Size(5, 5) //偏离值
& && && && &},
& && && && &circleOptions: styleOptions, //圆的样式
& && && && &polylineOptions: styleOptions, //线的样式
& && && && &polygonOptions: styleOptions, //多边形的样式
& && && && &rectangleOptions: styleOptions //矩形的样式
& && &&&});
& & function saveCoordinate(lng, lat, orgId) {
& && &&&$.ajax({
& && && && &type: &POST&,
& && && && &async: true,
& && && && &url: &/mapViewer/saveCoordinate&,
& && && && &data: 'lng=' + lng + '&lat=' + lat + '&orgId=' + orgId
& && &&&});
& & }&/script&
核心在于每个区域都要加一次map.addOverlay(ply1);&&//添加覆盖物
当时我勾画了多个区域，但只追加了一次覆盖物。导致显示跑偏
楼主，我想问问，你多边形坐标数据是怎么存储的？
楼主，我也是在做一个类似的项目！求楼主给个代码，emailto:[/email]！
你好 楼主 ，我现在也在做这样一个项目，能否把这一块的代码 发来学习一下 ...
这是我的 邮箱 emailto:[/email]
楼主，我也是在做一个类似的项目！求楼主给个代码，emailto:[/email]！ ...
你也在做这样的项目？沟通 沟通&&这是我的QQ
Powered by覆盖物 | 高德地图开放平台 | 高德地图API
Android平台
服务端开发
移动端开发
您现在的位置：覆盖物
所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括折线和多边形和圆)、信息窗体等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
地图API提供了如下几种覆盖物：
Marker： 标注表示地图上的点，可自定义标注的图标。
Polyline： 表示地图上的折线。
Polygon： 表示地图上的多边形。多边形类似于闭合的折线，另外您也可以为其设置填充颜色。
Circle： 表示地图上的圆。
InfoWindow： 表示信息窗体，也是一种特殊的覆盖物，它可以展示更为丰富的文字和多媒体信息。需要注意的是，同一时刻只能有一个信息窗体在地图上打开。
GroundImage： 表示地图上添加的图片图层。
有两种方式可以将覆盖物添加到地图上：
- 在实例化覆盖物对象时，设定其map属性。
- 调用覆盖物对象的setMap()方法，将Map对象作为参数传入。
移除覆盖物的方式：
-调用覆盖物对象的setMap()方法，将null作为参数传入。
注意：以上添加、删除方法不适用于InfoWindow。
点标注用于标识地图上的点。API提供了默认图标样式，您也可以通过Icon类自定义标注图标。Marker的构造函数的参数为MarkerOptions，用来设置点标注的经纬度位置、偏移量、图像、显示内容、图标是否可拖动、图标旋转、图标是否可见。
在创建一个点标注之后，如果设定了map属性，则自动将其添加到地图上。或者在创建之后，调用一下Marker的setMap()方法。
以下示例介绍了在地图指定位置添加一个默认点标注：
var mapObj = new AMap.Map("container");
var marker = new AMap.Marker({ //创建自定义点标注
map:mapObj,
position: new AMap.LngLat(116..903942),
offset: new AMap.Pixel(-10,-34),
icon: "/lbs/static/0.png"
position属性用于为点标注设置位置。
offset 属性用于设置偏移量，将其设置为(0, 0) 即“offset: new AMap.Pixel(0, 0);”则点标注图标左上角跟 position 指定的位置对齐，如A图所示。
图A 加偏移量前
图标的宽和高为(35, 35)，如果要使得图标底部中心点和 position 对齐，需要将图标向左移动10px，向上移动35px。于是，将偏移量设置为(-10, -35) 即“offset: new AMap.Pixel(-10, -35);”，则结果如B图所示。
图B 加偏移量后
注意：偏移量向上向左为负数，向下向右为正数。
复杂点标注
复杂点标注是在默认标注的基础上，添加一个AMap.Icon类，通过在Icon类表示的大图上截取其中一部分作为点标注的图标。它的其他属性和设置默认点标注的相同。
复杂点标注的一个应用场景就是，查询结果分页列表显示，同时每条结果按编号分别赋予编号的图标标注在地图上。要实现这个功能，就需要使用Icon来做。
Icon 有以下三个属性：
size：表示每个编号图标的宽高尺寸，类型；
image：要截取的图标所在大图url地址；
imageOffset：相对于大图的截取图位置，类型；
imageSize：图标所用图片的大小，根据所设置的大小拉伸或压缩图片，类型。
以下图为例，A-J共10个编号图标作为大图，image属性是该图的url地址。例如现在我们要截取字母B编号的部分使用。那么size属性应该设置为(28, 37)，这也就是字母B代表图标的宽和高。
而imageOffset属性指示了取图位置，原点(0, 0)为整幅图片的左上角，即图片中字母A的左上角位置。当想要自定义点标注的图标为字母B时，需要让图标B左上角位置与原点对齐，即图片向左移28px。由于偏移量向左为负数，所以imageOffset为（-28,0）。同理，想要显示字母C，则图片向左移56px，imageOffset为（-56,0）。
完整代码：
var mapObj = new AMap.Map("container");
var marker = new AMap.Marker({
position:new AMap.LngLat(116..907409),//基点位置
offset:new AMap.Pixel(-14,-34),//相对于基点的偏移位置
icon:new AMap.Icon({
//复杂图标
size:new AMap.Size(28,37),//图标大小
image:"/lbs/static/custom_a_j.png",//大图地址
imageOffset:new AMap.Pixel(-28,0)//相对于大图的取图位置
marker.setMap(mapObj);
自定义点标注
用户可以根据初始化的AMap.Marker对象来设置一个自定义的点标注。通过Marker对象的content属性来实现，content属性可以是一段HTML代码组成的字符串，也可以是一个DOM对象。
小提示：API并没有提供文本标签类Label，程序通过自定义点标注的方式，可以实现自己风格的Label。
如设计一个点标注，当鼠标移到标注上时，文字和其样式都发生变化，当鼠标移出时，恢复为原来的文字和样式。下面一段代码，标注显示为“AMap”，当鼠标划过时，显示文字变为“高德软件”。
/* 定义自定义点样式 */
div.marker{height:40
background:url(/lbs/static/marker.png) left top no-}
div.marker div{height:28line-height:28margin:0 10color:#FFF;
background:url(/images/marker_bg_170x28.gif)
right top no-padding-right:10}
/* 修改背景URL */
div.change{background-image:url(/lbs/static/marker-h.png);}
div.change div{background-image:url(/images/marker-h-l.gif);}
//自定义覆盖物dom元素
var m = document.createElement("div");
m.className = "marker";
var n = document.createElement("div");
n.innerHTML = "Amap";
m.appendChild(n);
var marker = new AMap.Marker({
map:mapObj, //添加到地图
position:new AMap.LngLat(116..907409),//基点位置
offset:new AMap.Pixel(0,-40),//相对于基点的偏移位置
//draggable:true, //是否可拖动
content:m //自定义覆盖物内容
//当触发mouseover事件时,换个皮肤
AMap.event.addListener(marker,"mouseover",function(){
n.innerHTML = "高德软件";//修改内容
m.className = "marker change";//增加样式
//当触发mouseout事件时,换回皮肤
AMap.event.addListener(marker,"mouseout",function(){
n.innerHTML = "Amap";//修改内容
m.className = m.className.replace("change","");
删除多个点标记
当需要移除多个点标记时可以通过两个方法实现：
- 1.通过循环调用Marker类的setMap(null)方法移除；
- 2.通过Map类的clearMap()方法移除所有覆盖物；
Polyline表示地图上的折线覆盖物。它包含一组经纬度坐标LngLat，并将这些坐标连接起来形成折线。
使用AMap.Polyline(PolylineOptions)构造一个折线实例。其中PolylineOptions包括线的经纬度数组、线的颜色、线的不透明度，线的粗细、线的样式。颜色可以是十六进制数字形式（比如：#ff0000）或者是颜色关键字（比如：red）。
Polyline的绘制需要浏览器支持矢量绘制功能。在Internet Explorer中，地图使用VML绘制折线；在其他浏览器中使用SVG或者Canvas绘制。
以下代码段绘制一条粗细为3像素的红色的透明度为0.4的折线：
var arr = new Array();//经纬度坐标数组
arr.push(new AMap.LngLat(116..913423));
arr.push(new AMap.LngLat(116..901176));
arr.push(new AMap.LngLat(116..912501));
arr.push(new AMap.LngLat(116..904600));
var polyline = new AMap.Polyline({
map:mapObj,
strokeColor:"red",
strokeOpacity:0.4,
strokeWeight:3
//调整视野到合适的位置及级别
mapObj.setFitView();
Polygon对象类似于Polyline对象，由一系列有序经纬度坐标构成,不同的是多边形是定义闭合区域。可以通过Polygon类的getArea()方法获取多边形的面积。
与折线一样，您可以定义多边形的PolygonOptions来定义多边形的颜色、透明度、线宽、填充色、透明度。
以下代码段绘制一个边界线粗细为3像素的红色的透明度为0.35的多边形：
var arr = new Array();//经纬度坐标数组
arr.push(new AMap.LngLat(116..920255));
arr.push(new AMap.LngLat(116..897555));
arr.push(new AMap.LngLat(116..892353));
arr.push(new AMap.LngLat(116..891365));
var polygon=new AMap.Polygon({
map:mapObj,//要显示覆盖物的地图对象
//多边形顶点经纬度数组
strokeColor:"#0000ff",//线颜色
strokeOpacity:0.2,//线透明度
strokeWeight:3,
fillColor: "red", //填充色
fillOpacity: 0.35 //填充透明度
上例的多边形包括四个经纬度数组，对于任意指定的路径，API将通过绘制连接最后一个坐标与第一个坐标的笔触以自动“封闭”任何多边形。
自V1.3版本起，可以通过polygon类来绘制“环”多边形（多边形区域在多边形内显示为“岛”）。具体的效果图如下所示：
注意：绘制“环”多边形时，路径path为二维数组，数组的第一个元素为外多边形，其余为“岛”多边形，外多边形需包含“岛”多边形，否则程序不作处理。
除了普通的Polygon类之外，高德地图JavaScript API还包括面向Circle的绘制圆形的类。
Circle类与Polygon类似，您可以使用CircleOptions指定圆构造函数属性的边的颜色、粗细和透明度，以及填充颜色和透明度。还有两个用于定义其形状的属性：center：中心点，radius：半径。
以下示例代码显示在地图上画一个以当前地图中心点为圆心，半径为1000米的圆。
circle = new AMap.Circle({
map:mapObj,//要显示覆盖物的地图对象
center:mapObj.getCenter(),//圆心，基点
radius:1000,//半径
strokeColor: "#F33",//线颜色
strokeOpacity: 1,//线透明度
strokeWeight: 3,//线宽
fillColor: "#ee2200",//填充颜色
fillOpacity: 0.35//填充透明度
默认信息窗体
信息窗体在地图上方的浮动窗体中显示内容，用户可以点击地图上的一个标注，弹出相关活动的信息窗体。
InfoWindow构造函数的参数是InfoWindowOptions对象，该对象指定了用于显示信息窗体的一组初始参数。在创建信息窗体之后，您需要调用InfoWindow的open()方法，向其传递要在其中打开信息窗体的Map，以及向其传递用于锚定信息窗体的Marker（可选）。（如果未提供任何标记，那么，会在其position属性上打开信息窗体）。
InfoWindowOptions对象是包含以下字段的对象常量：
content 指定信息窗体打开时，系统要在其中显示的文本字符串或DOM节点；
offset：指定从信息窗体的顶部到信息窗体锚定位置的偏移量；
autoMove：是否自动调整信息窗体至视野内；
size：信息窗体大小；
isCustom：是否自定义窗体。
InfoWindow 的位置取决于InfoWindow.open()方法传入的经纬度坐标。注意同一时刻地图上只能有一个信息窗体处于打开状态。
以下代码显示了在地图上添加标记，点击该标记可显示信息窗体。
//构建点对象
var marker = new AMap.Marker({
map:mapObj, //将点添加到地图
position:new AMap.LngLat(116..907409),
icon:" /images/0.png
",//marker图标，直接传递地址url
offset:new AMap.Pixel(-10,-35) //相对于基点的位置
var info = [];
info.push("&&高德软件");
info.push("&&电话 :
邮编 : 100102");
info.push("&&地址 : 北京市望京阜通东大街方恒国际中心A座16层");
var inforWindow = Window({
offset:new AMap.Pixel(0,-23),
content:info.join("")
AMap.event.addListener(marker,"click",function(e){
inforWindow.open(mapObj,marker.getPosition());
position为信息窗体打开open()方法的位置参数，传入此参数，设置信息窗体打开的位置，系统默认样式的信息窗体的位置基准点为窗体底部尖端位置。如果将信息窗体偏移量设置为(0, 0) 即“offset: new AMap.Pixel(0, 0);”则底部尖端位置与position对准，如A图所示。如果将信息窗体偏移量设置为(0, -23)，即“offset: new AMap.Pixel(0, -23);”，则底部尖端位置向左上方移动（0, 23）像素，结果如B下图所示。
图A offset设置为(0, 0)时
图B offset设置为(0, -23)时
自定义信息窗体
用户可根据自己的需要定制信息窗体的风格样式，包括信息窗体的显示外观和内容。这需要在构建信息窗体对象时用到isCustom、content两个属性。显示位置由position、offset两个属性配合设置。
对于自定义信息窗体的大小，可以用默认样式，即宽为320px，高度自适应显示；也可以在 content属性里面设置窗体的宽高。
自定义信息窗体的position和默认信息窗体的不同，自定义信息窗体的position为窗体底部边界的中心点位置，如图A所示。如果将position坐标处设置为偏移量为（0,0），想要达到图B所示的效果，即信息窗体的尖端对准marker点，则需要将信息窗体偏移量设置为（16,-45），即"offset：new AMap.Pixel(16,-45);"，底部尖端位置向右上方移动（16，-45）像素。
图A offset设置为(0, 0)时
图B offset设置为(16, -45)时
注意：一定要将isCustom属性设置为true，否则API引擎仍然会按照默认风格构建信息窗体。用户的风格通过content属性来设置。自定义信息窗体的示例，可参考。
图片覆盖物
AMap.GroundImage图片覆盖物类，用于添加一个只有一张图片的图层，图片的大小会随着地图缩放级别的改变而自适应的调整大小。
AMap.GroundImage构造函数的参数包括一个图片的Url地址，图片覆盖的范围Bounds(图片会根据Bounds的大小来显示)和GroundImageOptions对象，该对象指定了用于使用图片覆盖物时的一组初始化参数。
GroundImageOptions对象包括以下字段的属性：
- map：指要显示该groundImage的地图对象；
- clickable：图片是否可点击，true表示GroundImage支持鼠标点击事件，false表示不可点击，默认值：false；
- opacity：图片的透明度，取值范围为[0-1]，0表示完全透明，1表示不透明，默认值：1。
其中，图片覆盖物的显示地图对象和透明度也可以在GroundImage实例化后通过方法来设置。
以下示例展示了在地图上叠加一张图片：
var groundimageOpts={
map:mapObj,
//添加到地图
opacity:0.8,
//设置图片的透明度
clickable:true
//图片相应鼠标点击事件，默认：false
var sw = new AMap.LngLat(116..935029);
var ne = new AMap.LngLat(116..939577);
var bounds=new AMap.Bounds(sw,ne);//图片叠加的地理范围
var groundImage=new AMap.GroundImage("/wp-content/uploads/2014/06/gwf.png
groundImageOpts);//图片地址，图片叠加的地理范围，图片初始化对象
groundImage.setMap(mapObj);
其运行效果图如下所示：
貌似您还不是高德开发者哟，诚挚的邀请您加入我们的“伐木累”!
该文档对您是否有帮助？
您的点滴建议，将有助于开发文档的快速完善。
感谢您的建议！
本文档由 酸奶小妹，欢仔 共同提出改进建议。
(C) 2002- 版权所有 | 京ICP证070711号}