在地图中,显示多个地点的时候,想要更好的区分,往往会使用不同样式的地点图标,或改变图标的形状,或改变图标的颜色,或在图标上加上字符。论其成本,恐怕在原有地点图标上加上字符是最低的,添加字符相对来说也更利于区分。
百度地图 API 是采用 Icon 类来修改覆盖物,使用上 Marker 来完成标注的覆盖[1][2],可以用以下几种方式来实现加载带有数字或字母的 Marker。
单张图片
这是最没办法的办法,一个一个来,先放代码,后放示例。
通过 Image Sprites
既然是图片,那么可以使用类似于 CSS Image Sprites[3] 的方法来加载,通过 Icon 类 的 imageOffset 属性可以实现,具体如下:
通过 HTML5 Canvas
另外,也可通过 HTML5 的 Canvas 在图片里添加文字达到标注上加文字的效果,具体可参考台湾同胞的文章——利用 Canvas 製作 Google Maps API Marker Icon[4]。
通过七牛 API
鄙人既然使用七牛做图床,那么可以采用七牛图片处理的相关 API[5] 处理图片文件。
图片水印
使用七牛 API 的文字水印[6],可以存储单个标注的图片即可轻松变换出无数的图片,例如:
裁剪图片
既然七牛也支持裁切图片[7],那么也可以跟 CSS Image Sprites 般的处理,只不过是在图片本身做处理,而不是在展示图片时处理,如下:
几种方式的对比
一个地图里面需要显示 N 个有不同文字修饰的地标,那么:
方式 | 图片数 | IE8 支持 |
单张 | N | 是 |
imageOffset | 1(大) | 是 |
Canvas | 1(小) | 否 |
七牛水印 | N | 否 |
七牛裁剪 | N | 是 |
- 最省资源的恐怕是 HTML5 Canvas 的方式加载,只是对 IE8 的支持不是很好。
- 较省事的是七牛 API 的处理,不过水印文字需要用到 Base64 编码,鄙人采用
btoa()
[8] 对文字进行编码,并不兼容 IE8。 - 想要兼容 IE8 并省资源,那还是得尽量采用百度地图自身的方法来实现,不过或许哪天,IE 的兼容也可以抛一边了。
覆盖物素材
哦对了,若采用百度地图 API,我想采用他家的素材比较和谐,百度地图覆盖物的素材下面有一小部分。
http://api.map.baidu.com/img/markers.png
http://api.map.baidu.com/images/dest_markers.png
http://api.map.baidu.com/images/markers.png
http://api.map.baidu.com/images/markers_new.png
http://api.map.baidu.com/images/marker_red.png
http://api.map.baidu.com/images/marker_red_sprite.png
http://api.map.baidu.com/images/spotmkrs.png
http://api.map.baidu.com/images/stop_icon.png
http://api.map.baidu.com/images/trans_icons.png
以上域名换成 api0.map.bdimg.com
亦可
http://app.baidu.com/map/images/us_mk_icon.png
http://webmap0.map.bdstatic.com/wolfman/static/common/images/markers_new2_31a3944.png
参考资料
本文历史