在js版搜狗地图上添加brand标牌
来源：程序员人生 发布时间：2014-09-01 09:17:20 阅读次数：3985次
在上一篇博文中，我在搜狗地图上添加了Marker标记，但是在用户体验度上还是不够的，如果想了解某些信息，你得把鼠标指向marker，才能看到title里的值。有没有一种可以直接显示在marker上的东东呢？
其实有很多方法可以做到。搜狗地图提供了叠加层类，但是可以直接在页面上显示信息的，貌似只有InfoWindow、Label和Brand。一般InfoWindow是用来显示大量信息的。所以我们显示少量信息一般选用Label和Brand。但是Label显示的效果比较一般，四棱四角的，而Brand则是圆角矩形。所以我还是推荐使用Brand。当然这两个都是支持css的，如果你css技术过硬，也可以把Label整得跟Brand一样。
今天我就与大家分享一下在js版搜狗地图上，添加Brand标牌。
首先给大家一个官网的示例代码：点这里进入查看。我也先贴出我的代码来，让大家一睹为快吧：
首先定义一个brand数组，来记录所有景点的brand信息。
var brands = [];//记录所有景点的Brand信息
然后添加一个js function，来为所有景点设置一个Brand。
//加载标记牌
function addbrand(){
for(var i=0;i<p.length;i++){
var brand = new sogou.maps.Brand({
position: new sogou.maps.Point(p[i].x,p[i].y),
map: map,
spirit:
{
url:"http://api.go2map.com/maps/images/v2.5/2.png",
imgSize:[140,77],
//[[左侧],[中间],[右侧],[尖脚]]
//[clipLeft,clipTop,width,heigth]
clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]],
//[尖脚绑定坐标的位置]
anchor:[16,23],
//尖脚微调偏移
footOffset:[0,-3]
}
,content:p[i].title+"<br /> 城市：北京市"
//是否可见，可缺省，缺省为true
,visible:true
//指定内容区固定宽度为80，如果不指定，则会根据内容大小自动适应
//,fixSize:new sogou.maps.Size(80,0)
//指定css，css要在样式表事先定义好
,css:"brand"
});
brands.push(brand);//将生成的brand，加入到brands数组中
//侦听对象是brand本身
//sogou.maps.event.addListener(brand,"mouseover",function()
//{
//alert("发生mouseover事件，划过了"+this.getContent())
//});
}
//侦听对象是map,只侦听一次即可
//sogou.maps.event.addListener(map,"brandclick",function(brand)
//{
// alert("发生brandclick事件，点击了"+brand.getContent())
//});
}
最后修改initialize方法，把刚写的js方法添加到这里面：
//初始化数据
function initialize() {
//此处省略以前的代码...
//加载景点标记
addmarker();
//添加景点标牌
addbrand();
}
代码都有了，样式信息肯定是少不了的。在style中添加样式：
.brand{font-size:12px;color:#fff;white-space:nowrap;margin:12px 0 0;}
效果图如下：
效果看起来还不错吧。当然标牌之间有点项目遮挡，这个问题后面再解决。现在我来解释一下这段代码吧。
想要创建Brand对象，请看官网说明。在构建Brand的时候，需要指定position，这个就是地图坐标，可以是搜狗地图坐标或者经纬度坐标。我的代码中把position设定成了每个景点的坐标。map就是当前创建的地图对象。content则是显示内容。css定义标牌中文本的样式的css
class。spirit则是这个标牌所用到的背景图片。如果你不设定fixSize，那么这个brand会根据内容长度自动加长。是不是很贴心呀。快来试试吧。
下一篇博文，我们要解决一下brand项目遮挡问题。如果有心的朋友可能已经发现了，我们要从spirit下手。敬请期待吧。
生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
