在js版搜狗地圖上添加brand標牌
來源：程序員人生 發布時間：2014-09-01 09:17:20 閱讀次數：4228次
在上一篇博文中，我在搜狗地圖上添加了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下手。敬請期待吧。
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
