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

转: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添加到地图上

  

文本标注默认的样子是这样滴,如下图:

我觉得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这样的,才能被识别。

按 Ctrl+C 复制代码

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

按 Ctrl+C 复制代码

  

四、全部源代码

<!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

时间: 2024-11-09 10:52:42

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

百度地图API —— 制作多途经点的线路导航

[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------------------------------------------------------------------------------------------ 一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,

【百度地图API】交你如何用百度地图搜索自己的数据!不需数据库!

原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据.我应该怎么办呢? ------------------------------------------------------------------------------------------ 一.无需数据库,如何建立自己的地理信息表. 如果让初学者去建立数据库,那么意味着大家还要学习数据库,

百度地图API多个点聚合时,标注添加的标签label地图刷新就丢失的问题解决

当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></scrip

使用百度地图API制作线路轨迹播放

1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次连接相邻的2个点(注意polyline的个数比point的少1) 1.2绘制动态轨迹图(固定间隔时间) 每隔500毫秒读取一个轨迹点,实现a,b两个功能 a增加一条polyline b将marker从先前的point移到当前点 主方法使用setTimeout方法迭代来实现动态循环 Polyline在

调用百度地图API添加点聚合时,marker标注的label标签刷新丢失问题

最近在使用百度地图API的点聚合时遇到一个问题 当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合API<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_mi

乐卡上海网点地图制作心得 | 百度地图API使用心得

前言 事情的起因是我的爱人喜欢收集一些美丽的乐卡(明信片的一种,正面是美丽壮阔的风景照).作为一个坚实的后盾自然要支持她!于是我经常借着午休穿梭在大街小巷,凭借乐卡官方提供的乐卡网点地址进行寻找并取卡.在搜寻过程中,萌生了制作一张基于那些地址的专门戳点地图的想法.期间也看到蚂蚁家制作的北京乐卡地图使用的是百度地图API,但是该网页仅能运行于PC端,手机打开巨卡.刚好我的github博客站最近配置完成了,准备自己也写一个. 材料单 百度开放平台账号一个 百度开放平台浏览器端启用了Javascrip

百度地图API制作类似 百度地图的路线导航界面并实现简单的路线规划功能

之前我们讲了怎么在百度地图上设置Marker(如A点..) 和弹出框(跟随Marker的,Marker移动的时候也是会跟着移动的),接着又觉得百度地图自带的放大缩小不(fei)是(chang)很(de)漂(chou)亮,我们自定义了放大缩小的控件,本篇我们将制作类似百度地图API制作类似百度地图的公交/驾车/行走/查询界面并实现简单的路线规划功能. 先来张截图:   这个界面的实现其实是使用的SlidingUpPanelLayout 开源库从而使得可以跟随手指下拉上划: 其实布局也没什么好讲的,

【百度地图API】如何制作多途经点的线路导航——驾车篇

转:http://www.cnblogs.com/milkmap/archive/2011/08/26/2154627.html 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------------------------------------------------------------------------------------------

借助百度地图API制作企业百度地图

做网站需要插入地图,可以借助百度地图API,具体步骤如下: 1.打开百度地图API的网址:   http://api.map.baidu.com/lbsapi/creatmap/ 2.设置中心点 3.添加标注 4.点击下面的获取代码,复制出代码即可 5.复制的代码图标地址有问题,可以用这个地址的图标 http://map.baidu.com/image/us_mk_icon.png 6.自己测试源代码可供参考 <!DOCTYPE html> <html lang="en&quo