【百度地图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添加到地图上
文本标注默认的样子是这样滴,如下图:
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
转载于:https://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html
【百度地图API】——如何用label制作简易的房产标签相关推荐
- 【百度地图API】JS版本的常见问题
1.请问如何将我的店铺标注在百度地图上?我是否可以做区域代理?在百度地图上标注是否免费? 答复: 这里只负责API的技术咨询,不解决任何地图标注问题.在百度地图上标注自己公司,即气泡标注业务.该业务已 ...
- 【百度地图API】如何制作班级地理通讯录?LBS通讯录
原文:[百度地图API]如何制作班级地理通讯录?LBS通讯录 摘要:班级通讯录必备的功能,比如人员列表,人员地理位置标注,展示复杂信息窗口,公交和驾车等.一般班级人员都不会超过300个,因为可以高效地 ...
- 【百度地图API】如何制作多途经点的线路导航——驾车篇
摘要: 休假结束,酸奶×××要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ----------------------------------- ...
- 使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
- 【百度地图API】如何制作可拖拽的沿道路测距
摘要: 地图测距,大家都会,不就map.getDistance麼.可是,这只能测任意两点的直线距离,用途不够实际啊.比如,我想测试北京天安门到北京后海的距离,怎么办呢? 显然"沿道路测距&q ...
- 【百度地图API】如何制作一张魔兽地图!!——CS地图也可以,哈哈哈
[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈 摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快 ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注...
原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...
- 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注
[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内的标注 ...
- 地图上制作线路的动画_使用百度地图API制作线路轨迹播放
1.使用百度地图API制作轨迹播放: 可应用于车辆跟踪.行驶线路回放.跑步行程的记录等地图应用场景, 1.1绘制静态轨迹图 获取多个轨迹点point(必须包含经度.纬度) 使用polyline对象依次 ...
最新文章
- GPU 加速下的图像处理
- httpClient 处理SSL问题
- 阿里、小米、美团或将入恒指,但这还远远不够!
- Smalidea无源码调试 android 应用
- 海文考研名师做客新浪解析2007心理学考试大纲
- WordPress插件开发-创建、停用、删除插件
- 解决XCode安装插件后插件不能使用的问题(转载)
- Android 开发使用lambda实现 JDK8兼容
- ubuntu 18.04 解决无法联网的问题
- 以删除重建的方式修复托管磁盘虚拟机
- Telerik ui kendo for jquery 2022源码版
- vs2017安装nuget包生成和管理工具
- mybatis中大于小于号转义字符
- 求证三角形中r/R=4sinA/2sinB/2sinC/2=cosA+cosB+cosC-1
- Xshell- Xftp评估过期处理方法
- 一次 TLS SNI 问题
- Flutter开发之——getX-路由管理(04)
- 大数据基础篇~JavaSE第一章
- SQL数据库质疑怎么解决呢?
- OpenCV——绘制等高线
热门文章
- 在PHP语言中使用JSON
- 一键安装python3环境
- 如何定制一款12306抢票浏览器——完结篇
- DllMain中不当操作导致死锁问题的分析--进程对DllMain函数的调用规律的研究和分析
- springboot取yml中的值_SpringBoot 中从yml配置文件中读取常用的参数值
- 白噪音和粉红噪音煲机_白噪音真的有助于睡眠?这款可以自定义的应用给你答案...
- 傻瓜式动画制作软件_一个傻瓜版的动画制作软件——万彩动画大师
- 所有表单对象_Laravel 表单方法伪造与 CSRF 攻击防护
- loadrunner 调用java_LoadRunner调用Java程序—性能测试
- 病毒的灵魂拷问(绝对原创)