【百度地图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, ); //设立中心点和地图级别，就是初始化地图
二、添加文本标签
var myLabel = new BMap.Label("海辉房产 21000元", //为lable填写内容
{offset:new BMap.Size(-,-), //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这样的，才能被识别。
myLabel.setStyle({ //给label设置样式，任意的CSS都是可以的
color:"red", //颜色
fontSize:"14px", //字号
border:"", //边
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);
});
如果你忍受不了以上两点，请使用自定义marker来制作房产标注。虽然代码看上去有点儿多。但条理很清晰~
【百度地图API】你看过房产地图吗？你知道房产标注是如何建立的吗？
http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html
【百度地图API】——如何用label制作简易的房产标签的更多相关文章
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- 【百度地图API】如何制作班级地理通讯录？LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
原文:[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----- ...
- 【百度地图API】交你如何用百度地图搜索自己的数据！不需数据库！
原文:[百度地图API]交你如何用百度地图搜索自己的数据!不需数据库! 摘要: 我有一定的房产数据,还有银行数据.我想在百度地图上标注出来,并且能搜索到我这些数据. 可是百度的数据库上并没有我的数据. ...
- 百度地图API —— 制作多途经点的线路导航
[百度地图API]如何制作多途经点的线路导航——驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------ ...
- 百度地图API多个点聚合时，标注添加的标签label地图刷新就丢失的问题解决
当将自定义的Marker(含有Label)通过MarkerClusterer 管理的时候,当地图发生任何移动.缩放 的时候,Marker 的Label 就会自动消失. 这个问题主要是由于百度的点聚合A ...
- 【百度地图API】如何利用PhoneGap制作地图APP
原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...
- 【百度地图API】如何利用自己的数据制作社交地图？只显示可视区域内的标注
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
随机推荐
- iOS_24_画画板(含取色板)
终于效果例如以下: 一.简单说明 1.使用一个数组 strokesArr(笔画数组)记录全部笔画.数组中保存的是一个个的笔画字典,一个字典就是一个笔画.笔画字典中有三项:笔画的大小.颜色.points ...
- hdu3572 任务分配/最大流量推论全流
意甲冠军:将n分配的任务m机.到的每个任务需要的天数(如果没有持续的日常),并能做到在哪些天任务.询问是否有计划. 典型的任务(X)----日(Y)一半的最大流量,(因为这个任务是天之间的关系)处理器 ...
- Mac OS X Yosemite安装Hadoop 2.6记录
整个安装过程分为四部分: 一. 安装Homebrew 二. ssh localhost 三. 安装Hadoop已经进行配置文件设置 (伪分布式) 四. 执行栗子 一. 安装Homebrew 採用H ...
- 【C语言探索之旅】 第二部分第二课：进击的指针，C语言的王牌！
内容简介 1.课程大纲 2.第二部分第二课: 进击的指针,C语言的王牌 3.第二部分第三课预告: 数组 课程大纲 我们的课程分为四大部分,每一个部分结束后都会有练习题,并会公布答案.还会带大家用C语言 ...
- (2) 用DPM(Deformable Part Model，voc-release4.01)算法在INRIA数据集上训练自己的人体检測模型
步骤一,首先要使voc-release4.01目标检測部分的代码在windows系统下跑起来: 參考在window下执行DPM(deformable part models) -(检測demo部分) ...
- jQuery 有条件排序
尊重劳动成果,转载请注明出处(http://blog.csdn.net/sllailcp/article/details/41011173)... 点击button,表格里就会依照分数的高低.将学生信 ...
- Hadoop Hive sql 语法详细解释
Hive 是基于Hadoop 构建的一套数据仓库分析系统.它提供了丰富的SQL查询方式来分析存储在Hadoop 分布式文件系统中的数据,能够将结构 化的数据文件映射为一张数据库表,并提供完整的SQL查 ...
- 【Linux命令】--（9）其他常用命令
其他常用命令+++++++++++++++++++++++++++++++lndiffdatecal grep wcpswatchatcrontab++++++++++++++++++++++++++ ...
- 数据同步DataX
数据同步那些事儿(优化过程分享) 简介 很久之前就想写这篇文章了,主要是介绍一下我做数据同步的过程中遇到的一些有意思的内容,和提升效率的过程. 当前在数据处理的过程中,数据同步如同血液一般充满全过 ...
- LeetCode :: Insertion Sort List [具体分析]
Sort a linked list using insertion sort. 仍然是一个很简洁的题目,让我们用插入排序给链表排序:这里说到插入排序.能够来回想一下, 最主要的入门排序算法.就是插入 ...