在《GIS（三）——优化js版搜狗地图的brand标牌样式》中，分享了一下Brand样式的修改。现在把这几次Marker和Brand的修改统一再美化一下，算作一个终极优化版吧。
这次优化的主要内容是：
//加载海淀区边界坐标数据
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}]
} //加载边界
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);
}
//加载标记
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);
}
}
//加载标记牌
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数组中
}
} //箭头向上
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;
} //显示某个景点的内容
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;
}
}var brandId=0;//记录当前显示的brand
//初始化数据
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);
}
GIS（四）——为js版搜狗地图添加边界+Marker和Brand的最终美化版
原文地址：http://blog.csdn.net/xiaoxian8023/article/details/39314531
