百度地图API详解之自定义地图类型
http://blog.csdn.net/sup_heaven/article/details/8461586
今天的文章主要介绍如何利用地图API实现自定义地图。
百度地图API目前默认支持两种地图类型(map type):普通图和三维图,它们分别通过常量BMAP_NORMAL_MAP和BMAP_PERSPECTIVE_MAP来表示,在1.2版本中这两个常量实际上是MapType对象的实例。当然开发者也可以自己实例化一个MapType从而实现一个自定义的地图。
切图工具的使用
我们先从切图工具的使用开始,接着再分析该工具产生的代码来详细了解自定义地图的方法。切图工具放在了github上,具体地址为:https://github.com/jiazheng/BaiduMapTileCutter,进入后请下载TileCutter.exe:
注意,该工具是基于.NET平台开发的,所以要求有.NET Framework 4 以上的版本。
启动这个exe后会出现这个界面:
首先我们要做的就是选择一张图片作为地图的底图(图片下载自这里):
点击下一步后需要设置输出的目录,这里我们直接选择桌面:
继续下一步,这里要设置输出类型,我们使用默认值,即图块和相关代码都由工具生成:
坐标设置我们使用默认值,即图片的中心点所在的位置。由于我们制作的是独立的地图类型,所以中心点设置为0, 0即可。
级别范围设置:我们使用自定义,将范围设置为5到10级,原图放置在第10级,这样5到9级工具就会自动缩小图片。建议原图所在级别与最大级别一致,否则高于原图所在级别的时候图片会发虚(因为工具会将图片进行放大处理)。
设置地图类型的名称:
一切就绪,最后可以确认所有的信息是否正确。然后就可以点击“开始切图”了。
完成了:
这时我们会发现桌面多了一个index.html和一个tiles文件夹。我们打开index.html会看到结果:
源代码解析
现在再来看看这个页面的代码部分:

- <!DOCTYPE html>
- <html>
- <head>
- <title>自定义地图类型</title>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
- </head>
- <body>
- <div id="map" style="width:800px;height:540px"></div>
- <script type="text/javascript">var=new BMap.TileLayer();
- tileLayer.getTilesUrl (tileCoord, zoom) {
- x tileCoord.x;
- y tileCoord.y;
- tiles/ zoom /tile x _ y .png;
- }
- MyMap BMap.MapType(MyMap, tileLayer, {minZoom: , maxZoom: });
- map BMap.Map(map, {mapType: MyMap});
- map.addControl( BMap.NavigationControl());
- map.centerAndZoom( BMap.Point(, ), );
- </script>
- </body>
- </html>

代码先创建了一个TileLayer实例,它代表一个图层,接着实现getTilesUrl方法提供图片的路径。getTilesUrl方法由API在铺图的时候进行调用,调用时会提供图块编号和级别信息,开发者要做的就是根据图块编号和级别信息返回正确图片地址(有关坐标和图块编号的内容可以阅读此文)。
下面代码创建一个MapType实例,第一个参数为地图类型的名字,第二个参数为地图类型所对应的图层,这里我们直接传递之前创建的TileLayer实例,后面是一些可选的配置参数,这里指定了最小级别和最大级别。
后面的代码就很简单了,创建map实例,并通过配置参数指定地图类型为MyMap。
如果大家有月球或火星的图片,那么创建一个月球地图或者火星地图也就不是一件难事了。
百度地图API详解之自定义地图类型的更多相关文章
- [转]百度地图API详解之地图坐标系统
博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...
- 百度地图API详解之事件机制,function“闭包”解决for循环和监听器冲突的问题:
原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...
- 百度地图Api详解之地图标注
标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. ...
- 【百度地图API】如何制作自定义样式的公交导航结果面板?
原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...
- 【百度地图API】如何给自定义覆盖物添加事件
原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...
- iOS原生地图开发详解
在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...
- 微信小程序 使用腾讯地图SDK详解及实现步骤
信小程序 使用腾讯地图SDK详解及实现步骤 微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...
- 【百度地图API】如何制作商圈地图?行政地图?
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...
- 大数据学习笔记——Spark工作机制以及API详解
Spark工作机制以及API详解 本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...
随机推荐
- [吴恩达机器学习笔记]12支持向量机1从逻辑回归到SVM/SVM的损失函数
12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考资料 斯坦福大学 2014 机器学习教程中文笔记 by 黄海广 12.1 SVM损失函数 从逻辑回归到支持向量机 为了描述 ...
- [DeeplearningAI笔记]序列模型2.6Word2Vec/Skip-grams/hierarchical softmax classifier 分级softmax 分类器
5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.6 Word2Vec Word2Vec相对于原先介绍的词嵌入的方法来说更加的简单快速. Mikolov T, Chen ...
- 数学&模拟:随机化-矩阵随机化
BZOJ2396 给出三个行数和列数均为N的矩阵A.B.C,判断A*B=C是否成立 随机生成一个N乘1的矩阵R 然后判断A*B*R是否等于C*R,而前者相当于A*(B*R) 与后者一样都可以在O(N2 ...
- HDU6130 签到题 打表
LINK 题意:给出一个描述自身的数列,求出第n项 思路:看了很久题目才看懂..每个值其实是描述一个分组中的个数,把两个数列对照一下就可以了,那么一个指针扫,同时向尾部加数,构造个数组就行了.其实很水 ...
- KMP next表模板
void makeNext(const char P[],int next[]) { int q,k;//q:模版字符串下标:k:最大前后缀长度 int m = strlen(P);//模版字符串长度 ...
- 分析nginx日志脚本之python
为了对每个月的切割过的30个日志文件统计出访问最多的ip地址进行排序,整理了下面的脚本,主要思路是处理每一个日志文件的ip排序,最后进行字典合并,计算出月ip排序. #!/usr/bin/env py ...
- webDriver检索table数据
最近在做爬虫相关工作,用到了webdriver,记录一些遇到的问题和解决方法: 如何查找 table中的行 例如: <div id="a"> <table cla ...
- Cloudera 安装
参考网址: http://tcxiang.iteye.com/blog/2087597 http://archive.cloudera.com/cdh5/ http://archive.clouder ...
- 详细说说如何生成验证码—ASP.NET细枝末节(4)
前言 今天小编详细的说一下,ASP.NET网站开发过程中生成验证码的全部问题. 本文的目标,是让读者了解,生成验证码涉及的全部基础知识问题. 当然这里说的是比较简单的验证码. 真正符合要求的验证码,涉 ...
- oozie与hive的简单案例
1.把oozie中自带的hive案例拷贝到 测试目录 /opt/cdh-5.3.6/oozie-4.0.0-cdh5.3.6/oozie-apps下 2. 编辑 job.properties # # ...