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

简介: 原文:【百度地图API】——如何用label制作简易的房产标签摘要:   最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义。有没有快速简易创建房产标签的方法呢?   答案当然是有的啦~   我们可以利用label嘛! ------------------------------------------------------------------------------- 一、创建地图 这是老生常谈的三句话,初始化地图的js。
原文: 【百度地图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);
});

  

如果你忍受不了以上两点,请使用自定义marker来制作房产标注。虽然代码看上去有点儿多。但条理很清晰~

【百度地图API】你看过房产地图吗?你知道房产标注是如何建立的吗?

http://www.cnblogs.com/milkmap/archive/2011/04/18/2019906.html

目录
相关文章
|
4月前
|
机器学习/深度学习 自然语言处理 算法
小红书:通过商品标签API自动生成内容标签,优化社区推荐算法
小红书通过商品标签API自动生成内容标签,提升推荐系统精准度与用户体验。流程包括API集成、标签生成算法与推荐优化,实现高效率、智能化内容匹配,助力社交电商发展。
268 0
|
3月前
|
缓存 数据可视化 定位技术
快递鸟快递API技术指南:获取物流轨迹信息与轨迹地图的解决方案
在当今电商竞争激烈的环境中,物流体验已成为提升用户满意度的关键因素。研究表明,超过 75% 的消费者会因物流信息不透明而放弃下单。
692 1
|
5月前
|
监控 算法 API
用抖音电商 API 实现抖音小店商品标签精准打标
本文介绍如何利用抖音电商 API 实现商品标签精准打标,提升曝光与转化率。内容涵盖打标重要性、API 调用准备、标签自动化更新流程及最佳实践,助力商家高效运营,优化推荐效果。
380 0
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
1571 4
|
API
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
1519 4
|
API
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
1829 4
|
API 搜索推荐
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
225 0
|
JavaScript 前端开发 定位技术
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
vue 使用 vue-jsonp 解决跨域请求问题(访问百度地图API)
1016 0
|
3月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。