当前位置: 首页 > 编程日记 > 正文

【百度地图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

转载于:https://www.cnblogs.com/milkmap/archive/2011/08/24/2151073.html

相关文章:

李洪根关于[SQL]对于分页存储过程

作者&#xff1a;李洪根 微软MVP1。我个人认为最好的分页方法是: Selecttop10*fromtablewhereid>200写成存储过程,上面的语句要拼一下sql语句,要获得最后大于的哪一个ID号2。那个用游标的方式,只适合于小数据量的表,如果表在一万行以上,就差劲了你的存储过程还比不上NOT IN…

避不开的算法,如何吃透?

作者 | Alekya Ragipally译者 | 弯月&#xff0c;编辑 | 屠敏题图 | 自东方 IC出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;当你使用搜索引擎&#xff08;例如Google Chrome、Mozilla Firefox等&#xff09;的时候&#xff0c;后台发生了什么&#xff…

CentOS 6.4下PXE+Kickstart无人值守安装操作系统

一、简介1.1 什么是PXEPXE(Pre-boot Execution Environment&#xff0c;预启动执行环境)是由Intel公司开发的最新技术&#xff0c;工作于Client/Server的网络模式&#xff0c;支持工作站通过网络从远端服务器下载映像&#xff0c;并由此支持通过网络启动操作系统&#xff0c;在…

Asp.NET中常用的一些优化性能的方法

ASP.NET 的缓存机制相比ASP有很大的改进&#xff0c;本文档除对常用优化方法进行总结介绍外&#xff0c;强调了如何使用ASP.NET的缓存来获得最佳性能。1&#xff1a;不要使用不必要的session 和ASP中一样&#xff0c;在不必要的时候不要使用Session。可以针对整个应用程序或者页…

不信你看!这次Python和AI真的玩儿大了!!

这是一个很难让人心平气和的年代。不少人都想学 AI&#xff0c;总担心自己学不会&#xff0c;学不懂&#xff0c;或者学的课不是只教Python&#xff0c;就是缺少项目实战。最终都是浅尝辄止&#xff0c;不了了之&#xff01;我每天在公众号后台收到上千条类似的留言&#xff1a…

【引用】在Eclipse中将java Project转换成Dynamic Web Project

编辑工程的.project文件&#xff1a; 添加 <nature>org.eclipse.wst.common.project.facet.core.nature</nature> <nature>org.eclipse.wst.common.modulecore.ModuleCoreNature</nature> <nature>org.eclipse.jem.workbench.JavaEMFNature<…

mysql之字符编码问题

mysql编码分为服务端编码和客户端编码两大类字段编码, 表编码, 数据库编码这些编码都属于服务端编码,服务端编码决定你可以存哪些字符以及这些字符要哪种规则排序.字段编码优先级最高. 你插入用什么码属于客户端编码, 你用什么客户端编码都无所谓,只要插入前加个命令set names …

关于GCN,我有三种写法

作者 | 阿泽来源 | 阿泽的学习笔记&#xff08;ID: aze_learning&#xff09;本篇文章主要基于 DGL 框架用三种不同的方式来实现图卷积神经网络。DGL简介DGL&#xff08;Deep Graph Library&#xff09;框架是由纽约大学和 AWS 工程师共同开发的开源框架&#xff0c;旨在为大家…

CentOS5快速搭建vsftp服务

既然强调快速, 我们就马上开始&#xff0c;环境是centos5安装vsftpd&#xff0c;用了半天做了测试与修改&#xff0c;终于完成。 第一步&#xff1a;安装vsftpd&#xff0c;在终端允许 # yum -y install vsftpd 没什么问题就直接安装好啦 第二步&#xff1a;编辑vsftpd的配置…

我和freelancer不得不说的故事5 --- 心理落差

我和freelancer不得不说的故事5 --- 心理落差 我下海之前所在的外企&#xff0c;是一家顶级知名IT企业&#xff0c;其SAP咨询服务业务规模和影响都很大&#xff0c;是SAP咨询界五大咨询公司之一。我从07年加入这家公司&#xff0c;到辞职下海&#xff0c;在这家公司工作8年半。…

一起谈.NET技术,asp.net控件开发基础(18)

本篇继续上篇的讨论&#xff0c;可能大家已经在使用asp.net2.0了,DataSource属性不再使用,而是跟数据源控件搭配使用.现在讨论的绑定技术都是基于1.1版本,先熟悉一下,本质上是一样的,这样一步步的学习.对以后绝对有帮助.因为当你使用数据源控件,只需要设置一个DataSourceID,方便…

使用sqlserver来存放和取得session

asp.net 提供了三种存放 session的方式。 1 InProc 2 State Server 3 SQL Server 第一种是我们经常用的&#xff0c;第2中就是使用一个名为 state server 的机器用它的内存来存放其他机器的session 状态&#xff0c;其实&#xff0c;我们还可以在 sql server 里面来存放和取…

五项挑战获四项第一,地平线霸榜Waymo自动驾驶算法挑战赛

美国当地时间6月15日&#xff0c;Alphabet&#xff08;Google母公司&#xff09;旗下的自动驾驶公司Waymo在CVPR 2020自动驾驶Workshop上揭晓Waymo开放数据集挑战赛的结果&#xff0c;边缘AI芯片企业地平线斩获5项挑战中的4项全球第一。 本次挑战赛&#xff0c;Waymo开放了其自…

SSO单点登录基于CAS架构封装 Memcached 实例

2019独角兽企业重金招聘Python工程师标准>>> SSO认证中心是CAS整个应用架构的一个极其重要的关键点&#xff0c;必须满足如下两点要求&#xff1a; 1.高可用&#xff0c;不允许程序发生故障。如果认证中心发生故障&#xff0c;整个应用群将无法登录&#xff0c;导致…

HTMLButton控件下的Confirm()

作者&#xff1a;未知 请作者速与本人联系一、前言在ASP.NET中大部分如删除等一些动作为了友好都为添加confirm()来弹出消息框进行提示&#xff0c;但是HTML控件和WEB控件是否使用的方法是一样的呢?二、方法A. System.Web.UI.WebControls.Button控件现在一般都是这样在Page_…

Python 还能实现哪些 AI 游戏?附上代码一起来一把!

作者 | 李秋键责编 | Carol头图 | CSDN 付费下载自视觉中国人工智能作为当前热门在我们生活中得到了广泛应用&#xff0c;尤其是在智能游戏方面&#xff0c;有的已经达到了可以和职业选手匹敌的效果。而DQN算法作为智能游戏的经典选择算法&#xff0c;其主要是通过奖励惩罚机制…

一起谈.NET技术,专访微软MVP衣明志:走进ASP.NET MVC 2框架开发

日前微软已经发布ASP.NET MVC 2框架RC版&#xff0c;究竟这次RC版本的发布对于WEB开发者带来怎样的改变&#xff1f;以及未来ASP.NET MVC 2正式版还会有哪些改进&#xff1f;带着这样的问题&#xff0c;我们51CTO记者彭凡专门采访了微软MVP衣明志老师。ASP.NET MVC是微软官方提…

Entity Framework:Code-First Tutorial开篇

这个系列文章是关于Entity Framework Code-First的英文系列文章&#xff0c;内容不错&#xff0c;每篇一个主题知识点介绍&#xff0c;特转载过来 原文地址&#xff1a;http://www.entityframeworktutorial.net/code-first/entity-framework-code-first.aspx转载于:https://www…

Android开发者指南(22) —— Accessing Resources

前言   本章内容为Android开发者指南的Framework Topics/Application Resources/Accessing Resources章节&#xff0c;译为"资源调用"&#xff0c;版本为Android 3.2 r1&#xff0c;翻译来自&#xff1a;"CodeGuy"&#xff0c;欢迎访问他的博客&#xff…

如何快速实现HTML编辑器.NET组件

作者&#xff1a;未知 请作者速与本人联系得到“素材”首先我们需要得到一个HTML编辑器的原始代码&#xff0c;网上有不少这类的编辑器&#xff0c;如大名鼎鼎的RichTextBox&#xff0c;为了避免版权纠纷&#xff0c;以我所做得为例&#xff08;暂名&#xff1a;UltraTextBox…

罗永浩力荐,丁磊豪送的学习神器:手机查词真不如这支AI词典笔?

销量确实称得上火爆。尽管999元的直播优惠价价格并不低&#xff0c;但这支有道词典笔专业版在快手直播间还是经历了返场&#xff0c;最终20000多台一抢而空。 为这款产品站台的正是网易CEO丁磊&#xff0c;6月11日是他网上卖货的首秀&#xff0c;不过更重要的是&#xff0c;那天…

Thinking in java中关于Exception的一道面试题.

今天看到Thinking in Java中一个关于Exception的例子:最后看到有一篇总结的比较好的文章, 这里拿来记录下, 文章地址是:http://blog.csdn.net/salerzhang/article/details/46581457 感谢原作者. 1 class Annoyance extends Exception {}2 class Sneeze extends Annoyance {}3 …

使用 .NET 框架轻松开发完美的 Web 窗体控件

作者&#xff1a;David S. Platt 出自&#xff1a;微软 本文假定您熟悉 Visual Basic .NET、C# 和 HTML 下载本文的代码&#xff1a; WebC.exe (274KB) 摘要 预建的自定义控件可以简化和加快应用程序的设计&#xff0c;并使您能够维护 UI 的一致性。但是&#xff0c;预先打…

史上最强女游戏程序员

也许你听说过John Carmack 和Tim Sweeney等大牛的名字&#xff0c;而向来游戏工业都是阳盛阴衰&#xff0c;适逢国际妇女节&#xff0c;今天我为大家介绍游戏业界一位史上最强女游戏程序员&#xff1a;Corrinne Yu。 简历 以下是她在游戏业界内的简历 微软Halo团队首席引擎架构…

重磅日程公布!与百名大咖在线交流技术,2天20个AI论坛不可错过

当全球都在面向 AI 变革时&#xff0c;AI 不再是触不可及&#xff0c;它需要产业化落地&#xff0c;为社会创造价值。在这一轮技术革命、技术浪潮中&#xff0c;开发者们成为构建任何一家AI企业的核心竞争力。不过&#xff0c;不同于此前只懂开发语言、数据结构便可轻松躲过新技…

Python取出列表相应值的位置(表处理)

#需求在一个列表中&#xff0c;取出相应值的位置方法1&#xff1a;#脚本示例[rootlocalhost opt]# cat list.py #!/usr/bin/env python #_*_ coding:utf-8 _*_ name[!,#,*,Eric,wsyht,jack,jack,a,b,c,d,1,2,3,4,5,6,1,2,3,4,5,6,1,2,3,4,5,6,2332,4,2,6,2] first_pos 0 for …

rhel5.5安装xwindow

rhel5.5安装xwindow 1安装xwindow yum groupinstall "X Window System" 2、安装GNOME桌面环境 yum groupinstall "GNOME Desktop Environment" 3、卸载GNOME桌面环境 yum groupremove "GNOME Desktop Environment"转载于:https://blog.51cto…

使用 ASP.NET 加密口令

作者&#xff1a;未知 请作者速与本人联系当我们在网站上建立数据库时&#xff0c;保护用户的信息安全是非常必要的。多数用户不愿意让别人知道自己的信息&#xff0c;同时网管也不想因为安全问题而丢失网站的信誉。无论对于谁&#xff0c;安全问题都是非常重要的。为了解决这…

算法鼻祖高德纳,82 岁仍在写《计算机程序设计的艺术》

作者 | 年素清编辑 | 伍杏玲出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;高德纳&#xff08;Donald Ervin Knuth&#xff09;被誉为现代计算机科学的鼻祖&#xff0c;毕生致力于编译程序、属性文法和运算法则等领域的前沿研究&#xff0c;共出版专著17部&#x…

centos查看特定程序占用端口情况

ps axu |grep 程序名&#xff0c;找到特定程序的pidnetstat -nltp |grep pid即可。转载于:https://blog.51cto.com/zhukeqiang/1811735