首页 > 代码库 > GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版
GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在《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); }
整个效果图就出来了:
(点击这里到网站上查看)
到此js版搜狗地图的2个简单功能就介绍完毕了。接下来我会再做一个交互查询的功能,尽请期待。
GIS(四)——为js版搜狗地图添加边界+Marker和Brand的最终美化版
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。