使用过Javascript API的开发者都知道，使用Marker对象，可以在地图上用图标表示一个坐标位置。但有时候应用中可能还会用名称来说明一个位置，也就是一个文本标注。Javascript API并没有提供文本标注类。这并不是说实现不了文本标注功能。Marker提供了content属性，这个属性可以是DOM对象。如果marker实例化时，content属性被设置，那么marker对象自动显示content属性的值，也即DOM对象。 下面我们将讲述如何通过content属性实现文本标注功能。 首先，定义好一个显示文本内容的DOM对象。 var m =document.createElement("div"); m.className ="label";//设置了样式类名，页面style标签中要定义名为label的样式类 var n =document.createElement("span"); n.innerHTML = "文本标注";//要显示的文本标注的内容 m.appendChild(n); 这样变量m即是要赋予content属性的DOM对象。 其次，然后为这个DOM对象中的元素设置风格，就是常用的CSS风格设置方式，这样用户可以通过CSS的控制，将文本显示为自己想要的风格。 <style> .label{position:relative;} .label span{background-color:#ffffff;color:#000;border:1pxsolid red;font-size:14px;white-space:nowrap} </style> 注意：font-size设置自定义标注文字大小，本处设置为14px。如果要精确设置文本标注的偏移量，就需要用这个值。 最后，就是实例化Marker对象，并添加到地图上去。 var marker = newAMap.Marker({ map:mapObj, position:newAMap.LngLat(116.374258,39.907415), //基点位置 offset:new AMap.Pixel(-28,-14), //相对于基点的偏移位置 //draggable:true, //是否可拖动 content:m //自定义Marker的内容，即一个DOM对象 }); content属性被设置为m对象。 对偏移量offset的说明：因为默认情况下，文本块的左上角对准了基点，也即postion的值。我们要将文本块的底部中央位置对准基点，则需要设置offset。关于offset的计算： 自定义标注文字大小是14px，共4字，因此自定义标注的大小是（56,14）。如果要使自定义标注的底部中心位置和基点（例，西单）对齐，则需将自定义标注向左移动28px，向上移动14px，因此offset设置为(-28,-14)。如下图所示： 偏移前 偏移后 以上3步，就是实现文本标注的关键步骤。现附上完整代码： <!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type" content="text/html;charset=utf-8"> <style> .label{position:relative;} .labelspan{background-color:#ffffff;color:#000;border:1px solidred;font-size:14px;white-space:nowrap} </style> <scriptlanguage="javascript"src="http://webapi.amap.com/maps?v=1.2&key=yourkey"></script> <scriptlanguage="javascript"> var mapObj,tool; function mapInit(){ mapObj = new AMap.Map("map",{ center:new AMap.LngLat(116.374258,39.907415), level:16 }); mapObj.plugin(["AMap.ToolBar"],function(){ //加载工具条 tool = new AMap.ToolBar({ direction:false, ruler:true, autoPosition:false//禁止自动定位 }); mapObj.addControl(tool); }); addCustomMarker(); } function addCustomMarker(){ var m = document.createElement("div"); m.className = "label"; var n = document.createElement("span"); n.innerHTML = "文本标注"; m.appendChild(n); var marker = new AMap.Marker({ map:mapObj, position:new AMap.LngLat(116.374258,39.907415), //基点位置 offset:new AMap.Pixel(-28,-14), //相对于基点的偏移位置 //draggable:true, //是否可拖动 content:m //自定义覆盖物内容 }); } </script> </head> <bodyonLoad="mapInit()"> <div id="map"style="width:600px;height:500px;"></div> </body> </html>
思考：请大家根据已有的网页编程知识，以及刚才介绍的自定义Marker的方法，思考一下：如何给文本标注的文字内容设置一个喜欢的图片作为背景？
| 
发表于 2014-8-27 12:03:00
收藏
发表于 2015-2-6 11:31:48
楼主