标签：
转：http://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html
摘要：
最近，API爱好者们纷纷说，自定义marker太复杂了！不仅定义复杂，连所有的dom事件都要自己重新定义。有没有快速简易创建房产标签的方法呢？
答案当然是有的啦~
我们可以利用label嘛！
-------------------------------------------------------------------------------
一、创建地图
这是老生常谈的三句话，初始化地图的js。
var map = new BMap.Map("container"); //创建地图容器 var point = new BMap.Point(116.404, 39.915); //创建一个点 map.centerAndZoom(point, 15); //设立中心点和地图级别，就是初始化地图
二、添加文本标签
var myLabel = new BMap.Label("海辉房产 21000元", //为lable填写内容 {offset:new BMap.Size(-60,-60), //label的偏移量，为了让label的中心显示在点上 position:point}); //label的位置 myLabel.setTitle("我是文本标注label"); //为label添加鼠标提示 map.addOverlay(myLabel); //把label添加到地图上
文本标注默认的样子是这样滴，如下图：
var myLabel = new BMap.Label("<a href=‘http://dev.baidu.com/wiki/static/index.htm‘>百度地图API 0元</a>", //为lable填写内容
三、设置文本标签的样式。关键！！！
创建完毕的房产标注见上图，你可以更换图片，让房产标签看起来更好看！！
以下的代码，用来设置lable的CSS。你可以书写任意的CSS，注意，如果是font-size这样的CSS属性，你要写成驼峰式，fontSize这样的，才能被识别。
四、全部源代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>label制作</title> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script> </head> <body> <div style="width:800px;height:500px;border:1px solid gray" id="container"></div> </body> </html> <script type="text/javascript"> var map = new BMap.Map("container"); //创建地图容器 var point = new BMap.Point(116.404, 39.915); //创建一个点 map.centerAndZoom(point, 15); //设立中心点和地图级别，就是初始化地图 var myLabel = new BMap.Label("<a style=‘color:red;text-decoration:none‘ target=‘_blank‘ href=‘http://dev.baidu.com/wiki/static/index.htm‘>百度地图API 0元</a>", //为lable填写内容 {offset:new BMap.Size(-60,-60), //label的偏移量，为了让label的中心显示在点上 position:point}); //label的位置 myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的 fontSize:"14px", //字号 border:"0", //边 height:"120px", //高度 width:"125px", //宽 textAlign:"center", //文字水平居中显示 lineHeight:"120px", //行高，文字垂直居中显示 background:"url(http://cdn1.iconfinder.com/data/icons/CrystalClear/128x128/actions/gohome.png)", //背景图片，这是房产标注的关键！ cursor:"pointer" }); myLabel.setTitle("我是文本标注label"); //为label添加鼠标提示 map.addOverlay(myLabel); //把label添加到地图上
var infoWindow = new BMap.InfoWindow("<p style=‘font-size:12px;lineheight:1.8em;‘>我是lable打开的信息窗口 <img src=‘http://dev.baidu.com/wiki/static/static/img/new.gif‘ /></p>"); // 创建信息窗口对象 myLabel.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); }); </script>
-----------------------------------------------------------------------------------------------
不过，用label制作的房产标注，毕竟不是正规标注marker，而是文字标签label。所以，会有一些小缺陷。
如果你能忍受它们，那就大胆地使用label吧~
1、不能像marker那样，能拖动。enableDragging
2、设置不了a:hover，就是说鼠标放到label上时，背景图片不能变。
3、不能添加信息窗口（谢谢JZ1108的提醒，lable是可以添加信息窗口的~）2011.8.26更新
var infoWindow = new BMap.InfoWindow("<p style=‘font-size:12px;lineheight:1.8em;‘>我是lable打开的信息窗口 <img src=‘http://dev.baidu.com/wiki/static/static/img/new.gif‘ /></p>"); // 创建信息窗口对象 myLabel.addEventListener("click", function(){ map.openInfoWindow(infoWindow, point); });
如果你忍受不了以上两点，请使用自定义marker来制作房产标注。虽然代码看上去有点儿多。但条理很清晰~
【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？
http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html
标签：
原文地址：http://www.cnblogs.com/lihaibo-Leao/p/4575005.html
