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详解之自定义地图类型的更多相关文章

  1. [转]百度地图API详解之地图坐标系统

    博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需 ...

  2. 百度地图API详解之事件机制，function“闭包”解决for循环和监听器冲突的问题：

    原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和D ...

  3. 百度地图Api详解之地图标注

    标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. ...

  4. 【百度地图API】如何制作自定义样式的公交导航结果面板？

    原文:[百度地图API]如何制作自定义样式的公交导航结果面板? 摘要: 百度地图API有默认的公交导航结果面板,但样式比较单一:而百度地图上的结果面板就比较美观.如何利用百度地图API来制作一个比较美 ...

  5. 【百度地图API】如何给自定义覆盖物添加事件

    原文:[百度地图API]如何给自定义覆盖物添加事件 摘要: 给marker.lable.circle等Overlay添加事件很简单,直接addEventListener即可.那么,自定义覆盖物的事件应 ...

  6. iOS原生地图开发详解

    在上一篇博客中:http://my.oschina.net/u/2340880/blog/414760.对iOS中的定位服务进行了详细的介绍与参数说明,在开发中,地位服务往往与地图框架结合使用,这篇博 ...

  7. 微信小程序 使用腾讯地图SDK详解及实现步骤

    信小程序 使用腾讯地图SDK详解及实现步骤    微信小程序JavaScript SDK: 官方文档:http://lbs.qq.com/qqmap_wx_jssdk/index.html 步骤: 1 ...

  8. 【百度地图API】如何制作商圈地图？行政地图？

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  9. 大数据学习笔记——Spark工作机制以及API详解

    Spark工作机制以及API详解 本篇文章将会承接上篇关于如何部署Spark分布式集群的博客,会先对RDD编程中常见的API进行一个整理,接着再结合源代码以及注释详细地解读spark的作业提交流程,调 ...

随机推荐

  1. Rabbitmq -- rpc

    一.前言 MQ本身是基于异步的消息处理,前面的示例中所有的生产者(P)将消息发送到RabbitMQ后不会知道消费者(C)处理成功或者失败(甚至连有没有消费者来处理这条消息都不知道).但实际的应用场景中 ...

  2. [DeeplearningAI笔记]序列模型3.3集束搜索

    5.3序列模型与注意力机制 觉得有用的话,欢迎一起讨论相互学习~Follow Me 3.3 集束搜索Beam Search 对于机器翻译来说,给定输入的句子,会返回一个随机的英语翻译结果,但是你想要一 ...

  3. zoj 3229 Shoot the Bullet（有源汇上下界最大流）

    Shoot the Bullethttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 Time Limit: 2 Second ...

  4. 【CodeForces】704 B. Ant Man

    [题目]B. Ant Man [题意]给定n个人的xi,ai,bi,ci,di,起点为s,终点为e,移动: In simpler words, jumping from i-th chair to j ...

  5. 【CodeForces】908 D. New Year and Arbitrary Arrangement

    [题目]Good Bye 2017 D. New Year and Arbitrary Arrangement [题意]给定正整数k,pa,pb,初始有空字符串,每次有pa/(pa+pb)的可能在字符 ...

  6. python操作YAML文件之pyyaml库

    1. YAML简介 YAML是一种被认为可以超越XML.JSON的配置文件,最早接触是Spring Boot,木有想到python也是支持的,遂研究一下. python解析YAML库叫做pyyaml, ...

  7. 【译】第三篇 SQL Server代理警报和操作员

    本篇文章是SQL Server代理系列的第三篇,详细内容请参考原文. 正如这一系列的上一篇所述,SQL Server代理作业是由一系列的作业步骤组成,每个步骤由一个独立的类型去执行,除了步骤中执行的工 ...

  8. javaScript操作数组的常用方法

    map(映射), reduce(规约), forEach(遍历), filter(过滤),它们都是高阶函数,都是以传入不同的函数来以不同的方式操作数组元.ie都不支持 判断是否为数组 Array.is ...

  9. Http Header信息&状态码

    Header信息   (Status-Line):状态项,包括协议类型,http返回码和状态:  Cache-control:是否可以被缓存(public可以:private和no-cache不可以: ...

  10. thinkphp搜索排序