? ? ?從[上一篇博文](http://blog.csdn.net/xiaoxian8023/article/details/38921763)的效果圖中，我們看到有幾個相近的brand標牌給相互遮擋住了，不能完整的顯示。怎么處理一下呢？今天我們就來研究一下這個解決方案。 ? ? ?其實要想不被遮擋，可以讓這幾個brand位置變動一下，而不總是箭頭向下指向景點。如果改變箭頭的指向呢？首先我們要了解它原本是怎么處理的。這個肯定是從spirit入手了。 ? ? ?先說一下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] } ~~~ ? ? ?這里是[官網](http://map.sogou.com/api/documentation/javascript/api2.5/reference.html#BrandCssSpirit)的描述。url是圖片的url地址，可以是本地圖片。imgSize是圖片的像素大小。clips是原圖剪切的位置，如果看不懂繼續往下看。anchor是錨點，就是在地圖中的尖腳對應的坐標?，參數也是在圖片中的偏移量。footOffset是整個尖腳在地圖中顯示的位置。  ? ? ?由于這個brand可以自適應寬度，我以為它是以多張圖片完成的這個功能，但是看到打開這個url對應的圖片（上圖），才發現原來只是一張圖片。而自適應寬度則是clips設置的功勞了。clips就是從這張圖片上切不同的位置作為圖片進行顯示。clips分為4塊，左側、中間、右側可以完成自適應寬度。而尖腳則是箭頭在圖片中的位置。每一個切出來的圖片都是從左上角的坐標+寬高切出來的。為什么不設定多設定幾張圖片呢？這是為了減少下載小圖標的次數。  ? ? ?終于明白了這個brand箭頭的處理了。我們要想改變箭頭的指向，必須得修改圖片了。如果你學做ps，這個工作就簡單多了。下面是我修改的圖片：  ? ? ?就是多整幾個箭頭即可。如果想讓箭頭向右的話，就在切尖角的參數中，切向右箭頭的位置，然后anchor也要設定，把箭頭偏移到景點的位置。footOffset則需要調整到整個圖片的右側。很簡單，自己試著調整一下就明白了。 ? ? ?還回到咱們原先的話題。現在有多個景點，可能需要指向不同的方向，所以咱們就不能設定死了，那么就需要設定4個function，來得到4中方向的spirit。根據具體情況來選擇不同的brand指向。 ? ? ?下面是我調整好的function: ~~~ //箭頭向上 function get_up_spirit(){ var spirit={ url:"22.png", imgSize:[140,87], clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]], anchor:[17,0], footOffset:[0,-63] } return spirit; } //箭頭向下 function get_down_spirit(){ var spirit={ url:"22.png", imgSize:[140,87], clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[0,53,33,23]], anchor:[16,23], footOffset:[0,-3] } return spirit; } //箭頭向左 function get_left_spirit(){ var spirit={ url:"22.png", imgSize:[140,87], clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[39,53,13,33]], anchor:[0,16], footOffset:[-54,-45] } return spirit; } //箭頭向右 function get_right_spirit(){ var spirit={ url:"22.png", imgSize:[140,87], clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[86,53,13,33]], anchor:[12,16], footOffset:[54,-44] } return spirit; } ~~~ ? ? ?對應的效果圖如下：  ??? ??? ? ? ? ?4個js方法調好了，那么如何針對不同的景點來設定不同的brand指向呢？其實很簡單，我們只要為每個景點跟調用的方法名關聯上，通過不同的名字字節調用即可。 ~~~ //加載景點坐標數據 function loadScenic(){ p = [{x:12942902.5,y:4836960.5,title:'頤和園',brand:'up'}, {x:12933625.5,y:4836929.5,title:'香山、植物園',brand:'down'}, {x:12946300.5,y:4839226.5,title:'圓明園遺址公園',brand:'down'}, {x:12948437.5,y:4826035.0,title:'玉淵潭公園',brand:'up'}, {x:12950304.5,y:4829984.0,title:'北京海洋館',brand:'left'}, {x:12948074.5,y:4829765.0,title:'紫竹院公園',brand:'right'}, {x:12922964.5,y:4853605.5,title:'鳳凰嶺自然風景區',brand:'down'}]; } ~~~ ? ? ?在景點數組中，設定一個brand屬性，取值域為：up、down、left、right。然后再寫一個function，這個function主要是把通過brand來調用對應的方法名： ~~~ //獲取數據標牌 function get_spirit(flag){ return eval("get_" + flag + "_spirit()"); } ~~~ ? ? ?修改加載標牌的function如下： ~~~ //加載標記牌 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:get_spirit(p[i].brand)//get_right_spirit() ,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數組中 } } ~~~ ? ? ?效果圖：  ? ? ?效果還不錯吧。有沒有一點點心動呢？那就快快行動起來吧！ ? ? ?如果你的審美比較高的話，你會發現其實這樣處理，雖然都錯開了，但是卻沒有美感。如何處理呢？一篇博文，我將做最終的美化版，大家期待一下吧。