您當(dāng)前位置：首頁 > 互聯(lián)網(wǎng) > 在js版搜狗地圖上添加brand標(biāo)牌

在js版搜狗地圖上添加brand標(biāo)牌

來源：程序員人生發(fā)布時間：2014-09-01 09:17:20 閱讀次數(shù)：4217次

在上一篇博文中，我在搜狗地圖上添加了Marker標(biāo)記，但是在用戶體驗(yàn)度上還是不夠的，如果想了解某些信息，你得把鼠標(biāo)指向marker，才能看到title里的值。有沒有一種可以直接顯示在marker上的東東呢？

其實(shí)有很多方法可以做到。搜狗地圖提供了疊加層類，但是可以直接在頁面上顯示信息的，貌似只有InfoWindow、Label和Brand。一般InfoWindow是用來顯示大量信息的。所以我們顯示少量信息一般選用Label和Brand。但是Label顯示的效果比較一般，四棱四角的，而Brand則是圓角矩形。所以我還是推薦使用Brand。當(dāng)然這兩個都是支持css的，如果你css技術(shù)過硬，也可以把Label整得跟Brand一樣。

今天我就與大家分享一下在js版搜狗地圖上，添加Brand標(biāo)牌。

首先給大家一個官網(wǎng)的示例代碼：點(diǎn)這里進(jìn)入查看。我也先貼出我的代碼來，讓大家一睹為快吧：

首先定義一個brand數(shù)組，來記錄所有景點(diǎn)的brand信息。

var brands = [];//記錄所有景點(diǎn)的Brand信息

然后添加一個js function，來為所有景點(diǎn)設(shè)置一個Brand。

//加載標(biāo)記牌 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], //[[左側(cè)],[中間],[右側(cè)],[尖腳]] //[clipLeft,clipTop,width,heigth] clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]], //[尖腳綁定坐標(biāo)的位置] anchor:[16,23], //尖腳微調(diào)偏移 footOffset:[0,-3] } ,content:p[i].title+"<br /> 城市：北京市" //是否可見，可缺省，缺省為true ,visible:true //指定內(nèi)容區(qū)固定寬度為80，如果不指定，則會根據(jù)內(nèi)容大小自動適應(yīng) //,fixSize:new sogou.maps.Size(80,0) //指定css，css要在樣式表事先定義好 ,css:"brand" }); brands.push(brand);//將生成的brand，加入到brands數(shù)組中 //偵聽對象是brand本身 //sogou.maps.event.addListener(brand,"mouseover",function() //{ //alert("發(fā)生mouseover事件，劃過了"+this.getContent()) //}); } //偵聽對象是map,只偵聽一次即可 //sogou.maps.event.addListener(map,"brandclick",function(brand) //{ // alert("發(fā)生brandclick事件，點(diǎn)擊了"+brand.getContent()) //}); }

最后修改initialize方法，把剛寫的js方法添加到這里面：

//初始化數(shù)據(jù) function initialize() { //此處省略以前的代碼... //加載景點(diǎn)標(biāo)記 addmarker(); //添加景點(diǎn)標(biāo)牌 addbrand(); }

代碼都有了，樣式信息肯定是少不了的。在style中添加樣式：

.brand{font-size:12px;color:#fff;white-space:nowrap;margin:12px 0 0;}

效果圖如下：

效果看起來還不錯吧。當(dāng)然標(biāo)牌之間有點(diǎn)項(xiàng)目遮擋，這個問題后面再解決。現(xiàn)在我來解釋一下這段代碼吧。

想要創(chuàng)建Brand對象，請看官網(wǎng)說明。在構(gòu)建Brand的時候，需要指定position，這個就是地圖坐標(biāo)，可以是搜狗地圖坐標(biāo)或者經(jīng)緯度坐標(biāo)。我的代碼中把position設(shè)定成了每個景點(diǎn)的坐標(biāo)。map就是當(dāng)前創(chuàng)建的地圖對象。content則是顯示內(nèi)容。css定義標(biāo)牌中文本的樣式的css class。spirit則是這個標(biāo)牌所用到的背景圖片。如果你不設(shè)定fixSize，那么這個brand會根據(jù)內(nèi)容長度自動加長。是不是很貼心呀。快來試試吧。

下一篇博文，我們要解決一下brand項(xiàng)目遮擋問題。如果有心的朋友可能已經(jīng)發(fā)現(xiàn)了，我們要從spirit下手。敬請期待吧。

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
程序員人生

------分隔線----------------------------

上一篇 云計(jì)算大數(shù)據(jù)醫(yī)療行業(yè)應(yīng)用論壇：共享醫(yī)療大數(shù)據(jù) 攜手用戶、開發(fā)商共同打造智慧醫(yī)療

下一篇 css九種的DIV邊框樣式

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

在js版搜狗地圖上添加brand標(biāo)牌