2019独角兽企业重金招聘Python工程师标准>>>

在《GIS（三）——优化js版搜狗地图的brand标牌样式》中，分享了一下Brand样式的修改。现在把这几次Marker和Brand的修改统一再美化一下，算作一个终极优化版吧。

这次优化的主要内容是：

为整个操作的区域，添加边界
为Marker更换动态图片
为Brand更换半透明红色图片
只显示一个Brand，每3秒切换一次

1.绘制边界

首先做第一个吧，在搜狗地图上添加边界，是一个很简单的、很基本的，但是又很人性化的一个功能。在官网的实例代码中，覆盖层的第21个示例代码《画多边形区域、边自动闭合示例》即是讲解了如何在地图上绘制一个多边形区域。你只要给定几个坐标点，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标记》这篇文章，就可以完成了。其实就是在生成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标牌》。由于上次设定了指向不同景点，看起来非常乱，所以我决定还是通知箭头朝上。修改的图片如下：

修改一下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);}

整个效果图就出来了：