使用过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的方法,思考一下:如何给文本标注的文字内容设置一个喜欢的图片作为背景?
|