码迷,mamicode.com
首页 > 其他好文 > 详细

百度LBS开放平台个性化地图 制作一款独一无二的地图

时间:2014-07-30 20:50:14      阅读:300      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   使用   os   io   2014   

百度LBS开放平台个性化地图  制作一款独一无二的地图

天天用百度地图的亲们是否已不再满足只看如下的地图样式了呢?

bubuko.com,布布扣

                                                        默认百度地图样式

是否特别渴望看特别不一样的地图呢,如带京城81号气息的午夜蓝风格、绿灯侠风格的青春绿地图及红色警戒风格的地图?

bubuko.com,布布扣

                                          午夜蓝地图风格

 bubuko.com,布布扣

青春绿风格地图

bubuko.com,布布扣

                                                                               警戒红地图风格

如果你以为上述酷炫的地图只是PS出来的,那么你就out了,因为百度LBS开放平台已经对广大的开发者提供了定制如上个性化样式的地图功能啦~

开发者可以从http://developer.baidu.com/map/custom/list.htm页面提供的模板里选择合适的风格,然后通过如下一行代码map.setMapStyle({style:‘风格‘});便可设置指定的地图样式。

另外,如果开发者不满足如上页面提供的模板,也可以通过http://developer.baidu.com/map/img-editor.html底图编辑工具编辑所需的地图样式,该编辑工具除了支持改底图展示元素的颜色、透明度外,也可设置元素的隐藏喔~

以下介绍下使用个性化地图的成功案例:

1.    百度预测里的疾病预测地图(http://trends.baidu.com/disease/)

bubuko.com,布布扣

bubuko.com,布布扣

该地图背景是蓝色,与疾病专题相符,且地图元素主要保留行政边界和道路更易突出医院的分布。

2.    星巴克门店地图(http://www.starbucks.com.cn/storelocator.html 

bubuko.com,布布扣

                                                                                                                 星巴克门店地图          VS                  百度地图

星巴克门店地图与百度默认地图相比隐藏了地图上的poi信息(如红框部分),便于突出星巴克自己标示的点。类似赶集、58同城等分类网站可采用同样方法隐去poi信息,专注显示标示点及周边感兴趣的poi。

3.    数字英才网职位分布地图

http://map.01hr.com/mapSearch.do?type=2&text=%CF%FA%CA%DB&locationIdList=42&areaName=%CC%EC%CD%A8%D4%B7&areaid=&lat=40.081478&lng=116.419233&radius=1

bubuko.com,布布扣


数字英才网的人才分布地图采用小清新的地图风格展示职位信息,在炎日的夏日给人清爽的感觉,也可缓解内心找工作的急躁心情哈~同样,旅游行业也可选择该类清新风格的地图,给人轻松、舒缓的赶脚~~

4.    微铺子地图(http://vpuzi.cn/index.html
bubuko.com,布布扣

微铺子之所以选择黑色底图是为了跟网站整体风格保持一致。

同样,类似珍爱网这类婚恋类网站也可采用与本身主题类似的地图样式,参考如下。

bubuko.com,布布扣

以上案例用于抛砖引玉,开发者还可以结合自身网站特点构建其他极具想象力且又独一无二的地图应用~

百度LBS开放平台个性化地图 制作一款独一无二的地图,布布扣,bubuko.com

百度LBS开放平台个性化地图 制作一款独一无二的地图

标签:style   blog   http   color   使用   os   io   2014   

原文地址:http://blog.csdn.net/baidulbs/article/details/38305199

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!