文档章节

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

白志华
 白志华
发布于 2015/10/18 10:56
字数 908
阅读 7
收藏 0

       在上一篇博文中,我在搜狗地图上添加了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下手。敬请期待吧。

       

版权声明:本文为博主原创文章,未经博主允许不得转载。

本文转载自:http://blog.csdn.net/xiaoxian8023/article/details/38921763

共有 人打赏支持
白志华
粉丝 31
博文 265
码字总数 57524
作品 0
长沙
程序员
私信 提问
各家地图公司地图开发API比较

各家地图公司地图开发API比较 一、谷歌地图API地址:http://code.google.com/apis/maps/ 基于Google Maps,能够使用 JavaScript 将 Google Maps 嵌入网页中。API 提供了大量实用工具用以处理...

睡得
2015/05/25
2.5K
5
用javascript调用搜狗地图实现景点的显示

由于课程需要,最近做了搜狗地图服务的接入工作,要在地图上标注出景点位置,现略做总结,以备查阅。(部署该服务到Tomcat中的时候中文总是乱码,纠结了半天,最后不得不show in Eclipse) ja...

walk273
2013/05/28
0
0
Mapbox GL JS 0.50.0 发布,添加用户自定义图层

WEB GIS 开发框架 mapbox-gl-js v0.50.0 发布了,Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大量的...

h4cd
10/13
479
0
WEB GIS 开发框架 mapbox-gl-js v0.44.2 发布

WEB GIS 开发框架 mapbox-gl-js v0.44.2 发布。 Mapbox GL JS 是一个 JavaScript 库,使用 WebGL 渲染交互式矢量瓦片地图和栅格瓦片地图。WebGL 渲染意味着高性能,MapboxGL 能够渲染大量的地...

h4cd
04/05
613
0
New Ext JS Releases for Performance and IE9 Support: 4.0.2 and 3.4

Today we’re releasing two new versions of our flagship JavaScript framework — Ext JS 3.4, which brings IE9 support to Ext JS 3.x; and Ext JS 4.0.2, which contains a raft of p......

小红帽吃香蕉
2011/06/10
38
0

没有更多内容

加载失败,请刷新页面

加载更多

java环形缓冲区

import java.util.ArrayList;import java.util.List;/** * * 环形缓冲区<br/> * 一. 写数据:<br/> * 1. push: 当数据已写满时返回false,否则可以正常写入返回true<br/>......

whoisliang
20分钟前
1
0
内存性能的正确解读

一台服务器,不管是物理机还是虚拟机,必不可少的就是内存,内存的性能又是如何来衡量呢。 1. 内存与缓存 现在比较新的CPU一般都有三级缓存,L1 Cache(32KB-256KB),L2 Cache(128KB-2MB)...

阿里云官方博客
23分钟前
2
0
并发+超时示例

func installMantisAgent() {log.Println("begin auto repair mantis agent")num := 0succNum := 0failNum := 0var Q *queue.Queueswitch g.Config().RepairType {ca......

我爱吃葱花
35分钟前
1
0
增加一列自增id

ALTER TABLE xxxx ADD iSiteId INT(11) NOT NULL PRIMARY KEY AUTO_INCREMENT FIRST;

colin_86
45分钟前
3
0
配置Tomcat虚拟主机

12月13日任务 16.4 配置Tomcat监听80端口 16.5/16.6/16.7 配置Tomcat虚拟主机 16.8 Tomcat日志 配置tomcat监听80端口 默认tomcat监听的是8080端口,如果想直接输入ip就访问到网页,就需要进行...

robertt15
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部