泉州自助建站系统,影响网站收录的因素,昆明网站设计建设,推广专员是主要做什么【百度地图API】——如何用label制作简易的房产标签 原文:【百度地图API】——如何用label制作简易的房产标签摘要#xff1a; 最近#xff0c;API爱好者们纷纷说#xff0c;自定义marker太复杂了#xff01;不仅定义复杂#xff0c;连所有的dom事件都要自己重新定义。有没… 【百度地图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 hrefhttp://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 htmlhtmlheadmeta http-equivContent-Type contenttext/html; charsetgb2312 /titlelabel制作/titlescript typetext/javascript srchttp://api.map.baidu.com/api?v1.2/script/headbodydiv stylewidth:800px;height:500px;border:1px solid gray idcontainer/div/body/htmlscript typetext/javascriptvar map new BMap.Map(container); //创建地图容器var point new BMap.Point(116.404, 39.915); //创建一个点map.centerAndZoom(point, 15); //设立中心点和地图级别就是初始化地图var myLabel new BMap.Label(a stylecolor:red;text-decoration:none target_blank hrefhttp://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 stylefont-size:12px;lineheight:1.8em;我是lable打开的信息窗口 img srchttp://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 stylefont-size:12px;lineheight:1.8em;我是lable打开的信息窗口 img srchttp://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 posted on 2015-01-07 14:32 NET未来之路 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/lonelyxmas/p/4208390.html
