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. 线上Redis偶发性链接失败排查记

    问题过程 输入法业务于12月12日上线了词库接受业务,对部分用户根据用户uuid判断进行回传,在12月17日早上8点多开始出现大量的php报错(Redis went away),报错导致了大量的链接积 ...

  2. Java设计模式の迭代器模式

    迭代器模式定义 迭代器模式(Iterator),提供一种方法顺序访问一个聚合对象中的各种元素,而又不暴露该对象的内部表示. 迭代器模式的角色构成 (1)迭代器角色(Iterator):定义遍历元素所需 ...

  3. SpringCloud学习(2)——Rest微服务案例

    创建父工程: microservicecloud  创建公共模块api:microservicecloudapi SQL脚本: 此学习路线总共创建3个库, 分别为clouddb01, clouddb0 ...

  4. Eclipse 导入Hadoop 2.6.0 源码

    1. 首先前往 官网(Hadoop 2.6 下载地址)上下载Hadoop的源码文件,并解压 2. 事先请确定已经安装好jdk以及maven(Maven安装教程 这是其他人写的一篇博文,保存profil ...

  5. ios 字符串截取

    NSString *str = @"my name is jiemu"; 1.从第三个字符开始,截取长度为4的字符串 NSString *str2 = [str substring ...

  6. Spring使用注解方式就行事务管理

    使用步骤: 步骤一.在spring配置文件中引入<tx:>命名空间<beans xmlns="http://www.springframework.org/schema/b ...

  7. bzoj 2844: albus就是要第一个出场 高斯消元

    LINK 题意:看题目不如看样例解释.给出有n个数的集合,对这些子集中的数求异或,升序统计所有子集得到的数(重复会被计入),询问一个数x,问这个数出现的第一个位置 思路:在这里要求一个所有可能出现的异 ...

  8. 【Atcoder】AGC 020 D - Min Max Repetition 二分+构造

    [题意]定义f(A,B)为一个字符串,满足: 1.长度为A+B,含有A个‘A',B个'B'. 2.最长的相同字符子串最短. 3.在满足以上2条的情况下,字典序最小. 例如, f(2,3) = BABA ...

  9. phpcms添加子栏目后的读取

    一个栏目下面如果没有子栏目,那么它调用的模板就是列表页模板(及list_为前缀的模板):如果一个栏目下面有子栏目,那么它调用的就是栏目首页模板(category_为前缀的模板). 所以,当你这个栏目添 ...

  10. Xcode变量概览-summary

    问题描述 在Xcode中断点调试时,鼠标停留在变量上,就能看到变量的信息.但对于自定义对象,通常Xcode提供的直接信息非常有限,像这样 想要了解这个对象具体的内容,需要展开左边的箭头 当开发者想要知 ...