? ? ?在《[GIS（三）——優化js版搜狗地圖的brand標牌樣式](http://blog.csdn.net/xiaoxian8023/article/details/38958285)》中，分享了一下Brand樣式的修改。現在把這幾次Marker和Brand的修改統一再美化一下，算作一個終極優化版吧。 ? ? ?這次優化的主要內容是： 1. 為整個操作的區域，添加邊界 1. 為Marker更換動態圖片 1. 為Brand更換半透明紅色圖片 1. 只顯示一個Brand，每3秒切換一次 # 1.繪制邊界 ? ? ?首先做第一個吧，在搜狗地圖上添加邊界，是一個很簡單的、很基本的，但是又很人性化的一個功能。在官網的實例代碼中，覆蓋層的第21個示例代碼《[畫多邊形區域、邊自動閉合示例](http://map.sogou.com/api/documentation/javascript/api2.5/examples_doc/polygon-autoclose.html)》即是講解了如何在地圖上繪制一個多邊形區域。你只要給定幾個坐標點，Polygon對象會自動閉合最后一邊。[點擊這里](http://map.sogou.com/api/documentation/javascript/api2.5/reference.html#Polygon)看官網對Polygon類的說明。下面是實例中關鍵代碼：  ? ? ?可以看到new了一個Polygon的對象，其中，path參數是多邊形面坐標的有序序列，說白了就是一個坐標數組。strokeColor是邊界邊框顏色，strokeOpacity則是邊界邊框的不透明度，取值0.0-1.0。strokeWeight是邊界邊框的寬度。fillColor是中間的填充顏色，fillOpacity是填充部分的不透明度，同樣取值范圍是0.0-1.0。 ? ? ?是不是看起來很簡單呀。下面的代碼是我設定的北京海淀區的邊框坐標： ~~~ //加載海淀區邊界坐標數據 function loadBound(){ b = [{x:12924312.5,y:4842937.5}, {x:12921625,y:4842750}, {x:12919812.5,y:4847062.5}, {x:12919375,y:4849437.5}, {x:12918625,y:4849937.5}, {x:12918000,y:4850937.5}, //{x: }, {x:12919750,y:4854187.5}, {x:12920625,y:4856187.5}, {x:12922000,y:4856250}, {x:12927062.5,y:4854812.5}, {x:12927375,y:4855937.5}, //{x: }, {x:12931312.5,y:4856437.5}, {x:12931000,y:4858500}, {x:12933000,y:4861187.5}, {x:12934812.5,y:4861375}, {x:12935875,y:4858375}, {x:12936812.5,y:4858687.5}, {x:12938437.5,y:4858000}, //{x: }, {x:12940062.5,y:4857812.5}, {x:12939187.5,y:4853875}, {x:12941000,y:4853250}, {x:12941062.5,y:4854437.5}, {x:12941937.5,y:4853562.5}, {x:12941562.5,y:4852625}, //{x: }, {x:12943125,y:4851000}, {x:12943687.5,y:4849812.5}, {x:12944812.5,y:4850375}, {x:12946000,y:4847187.5}, {x:12949062.5,y:4846000}, {x:12951687.5,y:4847562.5}, {x:12952812.5,y:4848000}, // {x: }, {x:12954750,y:4847000}, {x:12953312.5,y:4845625}, {x:12955812.5,y:4844250}, {x:12956062.5,y:4842937.5}, {x:12951500,y:4841937.5}, {x:12954687.5,y:4836187.5}, {x:12954875,y:4833375}, //{x: }, {x:12953718.75,y:4833406.25}, {x:12953906.25,y:4830593.75}, {x:12952156.25,y:4830125}, {x:12952062.5,y:4831281.25}, {x:12951593.75,y:4831156.25}, {x:12951625,y:4829812.5}, //{x: }, {x:12949000,y:4829750}, {x:12949500,y:4829156.25}, {x:12949875,y:4824531.25}, {x:12949656.25,y:4823187.5}, {x:12947187.5,y:4823187.5}, {x:12945343.75,y:4821718.75}, {x:12945375,y:4823156.25}, //{x: }, {x:12940718.75,y:4823187.5}, {x:12940687.5,y:4825937.5}, {x:12940375,y:4826125}, {x:12940625,y:4826781.25}, {x:12938031.25,y:4826375}, {x:12936031.25,y:4826031.25}, {x:12935718.75,y:4826281.25}, {x:12935656.25,y:4827187.5}, //{x: }, {x:12936375,y:4827593.75}, {x:12936250,y:4828437.5}, {x:12936468.75,y:4830000}, {x:12936156.25,y:4830062.5}, {x:12935031.25,y:4831312.5}, {x:12933843.75,y:4833156.25}, {x:12933187.5,y:4833718.75}, //{x: }, {x:12933000,y:4836031.25}, {x:12932406.25,y:4836312.5}, {x:12931250,y:4835125}, {x:12930937.5,y:4836718.75}, {x:12929968.75,y:4836437.5}, {x:12928843.75,y:4837406.25}, {x:12930906.25,y:4838437.5}, {x:12931250,y:4839375}, {x:12928375,y:4842031.25}] } ~~~ ? ? ?有了坐標，再結合上面的關鍵代碼，寫一個在地圖上繪制邊界的funciton： ~~~ //加載邊界 function addbound(){ var triangleCoords = []; for(var i=0;i<b.length;i++){ triangleCoords.push(new sogou.maps.Point(b[i].x,b[i].y)); } var bermudaTriangle = new sogou.maps.Polygon({ path: triangleCoords, strokeColor: "#7CCD7C", strokeOpacity: 0.8, strokeWeight: 3, fillColor: "#7CFC00", fillOpacity: 0.35 }); bermudaTriangle.setMap(map); } ~~~ ? ? ?這樣只要調用一下即可在地圖上繪制出海淀區的邊界了。 # 2.更換Marker動態圖片 ? ? ?這個就很簡單了，如果忘記了，只要回頭看看《[GIS（一）——在js版搜索地圖上添加Marker標記](http://blog.csdn.net/xiaoxian8023/article/details/38855281)》這篇文章，就可以完成了。其實就是在生成Marker的時候，設定image參數即可。要設置的動態圖片如下：  修改的addmarker方法如下（我把圖片放到網上了）： ~~~ //加載標記 function addmarker(){ for(var i=0;i<p.length;i++){ var point = new sogou.maps.Point(p[i].x,p[i].y); //添加一個圖標 var image = 'http://mfxuan.free.800m.net/blogImage/red.gif'; var marker = new sogou.maps.Marker({ position: point, map: map, title:p[i].title, icon:image, visible:true }); markers.push(marker); } } ~~~ # 3.更換Brand半透明圖片 ? ? ?這個也很簡單，如果忘記的話，看這篇文章《[GIS（二）——在js版搜狗地圖上添加brand標牌](http://blog.csdn.net/xiaoxian8023/article/details/38921763)》。由于上次設定了指向不同景點，看起來非常亂，所以我決定還是通知箭頭朝上。修改的圖片如下：  ? ? ?修改一下addbrand方法，將參數設定為get_up_spirit()，同時先就愛那個visible設為false，后面會講到。 ~~~ //加載標記牌 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_up_spirit() ,content:p[i].title+"<br /> 城市：北京市" //是否可見，可缺省，缺省為true ,visible:false //指定內容區固定寬度為80，如果不指定，則會根據內容大小自動適應 ,fixSize:new sogou.maps.Size(80,0) //指定css，css要在樣式表事先定義好 ,css:"brand" }); brands.push(brand);//將生成的brand，加入到brands數組中 } } ~~~ ? ? ?同時修改get_up_spirit方法，設定背景圖片，而且調整anchor下移7個像素。這是因為修改了marker的圖片了，為了防止相互遮擋，將圖片整體下移。 ~~~ //箭頭向上 function get_up_spirit(){ var spirit={ url:"http://mfxuan.free.800m.net/blogImage/22.png", imgSize:[140,87], clips:[[0,0,8,51],[8,0,1,51],[132,0,8,51],[105,53,33,13]], anchor:[17,-7], footOffset:[0,-63] } return spirit; } ~~~ # 4.設定標牌切換 ? ? ?標牌統一向上，相互之間肯定是遮擋了。所以為了避免遮擋顯得凌亂，可以每次只顯示一個brand的信息，幾秒之后切換一下。這樣就完美解決了前面遇到的問題。 ? ? ?修改方法很簡單，在addbrand方法中，把所有的brand的visible設為false，添加一個changeView方法，去動態更改brand的visible屬性，或者直接調用hide()和show()來控制顯示即可： ~~~ //顯示某個景點的內容 function changeView(){ //由于new Brand的時候，visible=false,div被隱藏了，所以將所有brand的div都顯示出來 $(".brand").parent().parent().css("display","block"); //切換標牌 for(var i=0;i<brands.length;i++){ brands[i].setZIndex(15); brands[i].hide();//所有隱藏 } if(brandId<brands.length){ brands[brandId].show();//顯示 brands[brandId].setZIndex(20); brandId = (brandId+1) % brands.length; } } ~~~ ? ? 當然要先定義一個變量來存儲當前顯示的brand是哪個： ~~~ var brandId=0;//記錄當前顯示的brand ~~~ ? ? 最后修改一下初始化方法initialize，把添加上的方法都在這里面進行調用： ~~~ //初始化數據 function initialize() { //將地圖定位在海淀區域 var point = new sogou.maps.Point(12939000,4840250); var myOptions = { zoom: 11, center: point } //加載并初始化地圖 map = new sogou.maps.Map(document.getElementById("map_canvas"), myOptions); //加載景點坐標值 loadScenic(); //加載邊界坐標值 loadBound(); //加載景點標記 addmarker(); //添加景點標牌 addbrand(); //立即顯示一個 changeView(); //每隔3秒，切換景點顯示 setInterval(changeView,1000*3); //加載邊界 addbound(map); } ~~~ ? ? ?整個效果圖就出來了：  （[點擊這里到網站上查看](http://mfxuan.free.800m.net/showmap.html)） ? ? ?到此js版搜狗地圖的2個簡單功能就介紹完畢了。接下來我會再做一個交互查詢的功能，盡請期待。