GIS（二）——在js版搜狗地图上添加brand标牌

在上一篇博文中，我在搜狗地图上添加了Marker标记，但是在用户体验度上还是不够的，如果想了解某些信息，你得把鼠标指向marker，才能看到title里的值。有没有一种可以直接显示在marker上的东东呢？

其实有很多方法可以做到。搜狗地图提供了叠加层类，但是可以直接在页面上显示信息的，貌似只有InfoWindow、Label和Brand。一般InfoWindow是用来显示大量信息的。所以我们显示少量信息一般选用Label和Brand。但是Label显示的效果比较一般，四棱四角的，而Brand则是圆角矩形。所以我还是推荐使用Brand。当然这两个都是支持css的，如果你css技术过硬，也可以把Label整得跟Brand一样。

今天我就与大家分享一下在js版搜狗地图上，添加Brand标牌。

首先给大家一个官网的示例代码：点这里进入查看。我也先贴出我的代码来，让大家一睹为快吧：

首先定义一个brand数组，来记录所有景点的brand信息。

  var brands = [];//记录所有景点的Brand信息

然后添加一个js function，来为所有景点设置一个Brand。

  //加载标记牌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:{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]},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数组中//侦听对象是brand本身//sogou.maps.event.addListener(brand,"mouseover",function()//{//alert("发生mouseover事件，划过了"+this.getContent())//});}//侦听对象是map,只侦听一次即可//sogou.maps.event.addListener(map,"brandclick",function(brand)//{//    alert("发生brandclick事件，点击了"+brand.getContent())//});}

最后修改initialize方法，把刚写的js方法添加到这里面：

  //初始化数据function initialize() {//此处省略以前的代码...//加载景点标记addmarker();//添加景点标牌addbrand();}

代码都有了，样式信息肯定是少不了的。在style中添加样式：

.brand{font-size:12px;color:#fff;white-space:nowrap;margin:12px 0 0;}

效果图如下：

效果看起来还不错吧。当然标牌之间有点项目遮挡，这个问题后面再解决。现在我来解释一下这段代码吧。

想要创建Brand对象，请看官网说明。在构建Brand的时候，需要指定position，这个就是地图坐标，可以是搜狗地图坐标或者经纬度坐标。我的代码中把position设定成了每个景点的坐标。map就是当前创建的地图对象。content则是显示内容。css定义标牌中文本的样式的css class。spirit则是这个标牌所用到的背景图片。如果你不设定fixSize，那么这个brand会根据内容长度自动加长。是不是很贴心呀。快来试试吧。

下一篇博文，我们要解决一下brand项目遮挡问题。如果有心的朋友可能已经发现了，我们要从spirit下手。敬请期待吧。

GIS（二）——在js版搜狗地图上添加brand标牌相关推荐

GIS（一）——在js版搜索地图上添加Marker标记
由于我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的其中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图,使用的是js版本.大家有兴趣的话,可以参考 ...
GIS（四）——为js版搜狗地图添加边界+Marker和Brand的最终美化版
在<GIS(三)--优化js版搜狗地图的brand标牌样式>中,分享了一下Brand样式的修改.现在把这几次Marker和Brand的修改统一再美化一下,算作一个终极优化版吧. 这次优化的 ...
GIS（六）——实现js版搜狗地图周边搜索功能
在上一篇文章<GIS(五)--完成js版搜狗地图基本交互搜索功能>中,介绍了搜狗地图的关键字搜索功能,今天就实现以下另一个重要功能吧--那就是周边搜索功能. 按照惯例,还是把官网上的示例代 ...
GIS（五）——完成js版搜狗地图基本交互搜索功能
最近在做的有关于北京海淀智慧旅游的一个项目,既然是旅游项目,那么涉及到地图的操作也就是必然的事情了.前几篇文章,主要是分享了在地图上标记多个景点及其景点信息的技术.其实跟项目中还是有一些不一样的.项目 ...
GIS（三）——优化js版搜狗地图的brand标牌样式
从上一篇博文的效果图中,我们看到有几个相近的brand标牌给相互遮挡住了,不能完整的显示.怎么处理一下呢?今天我们就来研究一下这个解决方案. 其实要想不被遮挡,可以让这几个brand位置变动一下,而不 ...
网页版谷歌地图上标记多个点_Google正式放弃Beta版标记
网页版谷歌地图上标记多个点 As we predicted on SitePoint three days ago, Google has quietly dropped the "beta ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...
使用Python调用百度地图的API在地图上添加标记
写在前面近期博主工作太忙,快一个月没更新博客.今天跑了大半天的腿,被一堆破事儿弄的无比憋屈,写篇博客调节一下心情. 博主的目的是在地图上做一些标记,然后保存为html网页文件,这样方便我的软件调用, ...
三维数字沙盘虚拟电子沙盘触摸互动第四十课在地图上添加FrameworkElement
三维电子沙盘数字沙盘大数据人工智能第四十课在地图上添加FrameworkElement 下面介绍怎样在地球上增加自己的FrameworkElement,因为FrameworkElement为WPF ...

GIS（二）——在js版搜狗地图上添加brand标牌

GIS（二）——在js版搜狗地图上添加brand标牌相关推荐

最新文章

热门文章