700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【百度地图API】——如何用label制作简易的房产标签

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

时间:2019-10-22 19:29:01

相关推荐

【百度地图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='/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(/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./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='/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(/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='/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是可以添加信息窗口的~).8.26更新

var infoWindow = new BMap.InfoWindow("<p style='font-size:12px;lineheight:1.8em;'>我是lable打开的信息窗口 <img src='/wiki/static/static/img/new.gif' /></p>"); // 创建信息窗口对象

myLabel.addEventListener("click", function(){

map.openInfoWindow(infoWindow, point);

});

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

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

/milkmap/archive//04/18/906.html

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。