【百度地图API】——如何用label制作简易的房产标签

原文:【百度地图API】——如何用label制作简易的房产标签

摘要：

　　最近，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添加到地图上

文本标注默认的样子是这样滴，如下图：

我觉得label最棒的一点是，它不仅仅是文本标签而已，还能写成<a></a>链接的方式。

这样，你的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这样的，才能被识别。

myLabel.setStyle({                                   //给label设置样式，任意的CSS都是可以的
    color:"red",                   //颜色
    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"
});

四、全部源代码

<!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);  
});