百度地图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的作业提交流程,调 ...
随机推荐
- tp查询中2个表格中字段，比较大小
$where['_string'] = '`has_number` < `number`';//~~~注意:这里`不能丢了: $coupon_flag = $coupon->where($ ...
- 删除rabbitmq中持久化的队列和数据
在windows中的rabbitmq安装目录中的/sbin目录下: rabbitmqctl.bat stop_app rabbitmqctl.bat reset rabbitmqctl start_a ...
- 前端PHP入门-012-回调函数[慎入]
尽力而为,对于WEB前端和美工同学,比较难了!但是你们都学过JS的闭包等操作,那么这里也一定没有问题! 回调函数,可以配合匿名函数和变量函数实现更加优美.复杂的一种函数结构. 回调函数,就是在处理一个 ...
- 「LibreOJ β Round #4」游戏
https://loj.ac/problem/524 题目描述 qmqmqm和sublinekelzrip要进行一场游戏,其规则是这样的: 首先有一个序列,其中每个位置是一个整数或是X.双方轮流将X的 ...
- display:inline-block之用法
HTML的元素有多种display属性,比较常见的有display:none; display:block; display:inline和display:inline-block;等.详细可参阅W3 ...
- ArrayList既然继承自AbstractList抽象类，而AbstractList已经实现了List接口，那么ArrayList类为何还要再实现List接口呢？
https://www.cnblogs.com/bluejavababy/p/4320545.html
- 【NOI2017】游戏 2-sat算法
[题目]LibreOJ [题意]n场游戏,有三种车ABC,给定长度为n的字符串,'a'表示不能选A,'b''c'同理,'x'表示不限,至多d个'x'.有m个限制(i,hi,j,hj)表示如果第i场选择 ...
- 【洛谷 P2512】 [HAOI2008]糖果传递（贪心）
题目链接 环形均分纸牌. 设平均数为\(ave\),\(g[i]=a[i]-ave\),\(s[i]=\sum_{j=1}^ig[i]\). 设\(s\)的中位数为\(s[k]\),则答案为\(\su ...
- bzoj 2653 二分答案+可持久化线段树
首先离散化,然后我们知道如果对于一个询问的区间[l1,r1],[l2,r2],我们二分到一个答案x,将[l1,r2]区间中的元素大于等于x的设为1,其余的设为-1,那么如果[l1,r1]的最大右区间和 ...
- kendo method：destroy 解决有些在kendo.all.js 的js 库里报错问题
首先,不得不承认,kendo UI 是个不错的东西,特别对于一个前端开发到行不足的程序猿来说.而在我们使用过程中貌似还是会遇到各种奇怪的问题.比如我们会经常用到对一些控件进行重赋值. destroy ...