百度地图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。

如果大家有月球或火星的图片,那么创建一个月球地图或者火星地图也就不是一件难事了。

时间: 2024-10-15 05:19:25

百度地图API详解之自定义地图类型的相关文章

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

博客原文地址:http://www.jiazhengblog.com/blog/2011/07/02/289/ 我们都知道地球是圆的,电脑显示器是平的,要想让位于球面的形状显示在平面的显示器上就必然需要一个转换过程,这个过程就叫做投影(Projection).在地球上我们通过经纬度来描述某个位置,而经过投影之后的地图也有自己的坐标系统,本篇文章就来详细介绍在百度地图API中涉及的各种坐标体系. 在百度地图API中,你需要了解如下坐标系: 经纬度:通过经度(longitude)和纬度(latitu

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

原文:百度地图API详解之事件机制,function"闭包"解决for循环和监听器冲突的问题: 百度地图API详解之事件机制 2011年07月26日 星期二 下午 04:06 和DOM编程里的事件模型一样,百度地图API也提供了类似的事件机制.本文介绍了事件监听的添加和移除方法,this指针和事件参数的使用以及绑定事件监听函数中涉及的闭包问题,最后分享了一个用来增强地图API事件机制的开源项目. 事件添加和移除 我们最简单的事件开始,下面的代码示例给map对象添加了click事件的监听

百度地图API详解之公交导航

原文地址:http://blog.csdn.net/sup_heaven/article/details/8461593 只是作为备忘!!! 一次调试百度地图多marker事件监听的问题,不知如何解决,后来看了原作者jz1108才知道要用闭包.觉得原作者jz1108关于百度地图的文章写的不错,所以转载到了CSDN,为了尊重原作者jz1108,特此说明. 前面我们介绍过驾车导航了,今天来说说公交导航. 什么是公交导航 公交导航功能是告诉使用者从A到B的公交出行方案,而不是某条具体的公交线路信息,这

百度地图API详解之地图标注(一)

博客原文地址:http://www.jiazhengblog.com/blog/2011/09/15/400/ 本文将向大家介绍百度地图API的标注(Marker)的使用方法和一些实现细节. 标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. 从上面的图可以看出,不论地图如何变化标注始终指向"西单商场"的位置. 如何知道某个点的坐标? 上例

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

标注概述 标注(Marker)是用来表示一个点位置的可见元素,每个标注自身都包含地理信息.比如你在西单商场位置添加了一个标注,不论地图移动.缩放,标注都会跟随一起移动,保证其始终指向正确的地理位置. 从上面的图可以看出,不论地图如何变化标注始终指向“西单商场”的位置. 如何知道某个点的坐标? 上例中我们在西单商场位置添加了一个标注,那么我是如何知道它的坐标点呢?可以通过API的事件机制来获取: map.addEventListener('click', function(e){ console.

百度地图API使用系列3-基本地图1

百度基本地图使用1 关于百度地图申请开发者key 可以参考前面的博客 百度地图API使用系列1-准备工作 关于搭建工程的可以参考前面的博客 百度地图API使用系列2-显示地图 这一篇博客介绍基本地图使用里面的地图类型.显示实时交通图.在地图显示一个Marker. 这里要注意的是关于地图的操作不是有显示地图的控件直接去完成,百度为他添加了一个属性BaiduMap 可以把这个属性理解为是 地图的管理器 我们可以通过对应 的 get 方法 获取这个属性 baiduMap = baiduMapView.

Android ProgressBar详解以及自定义

版本:1.0 日期:2014.5.16 版权:© 2014 kince 转载注明出处 这一次主要说一下Android下的进度条,为什么是它呢,因为近期被其各种美轮美奂的设计所倾倒,计划逐渐去实现.另外一个因素也是它也是为数不多的直接继承于View类的控件,从中可以学习到一些自定义控件的知识.下面列举了一些个人觉得还算漂亮的进度条,仅供参考. 是不是很漂亮,其实就像上面图形展示的那样,进度条大体上无非就是这几种形式.这样一来肯定是需要自定义了,所以方向有两个:要么继承于系统的ProgressBar

JavaFX学习之道:JavaFX API详解之Window,Stage,PopupWindow

stage包中包含 Window, Stage, PopupWindow, Popup, FileChooser, DirectoryChooser, Screen等类. 其中Window类可理解成一个窗体,用于存放Scene,并与用户操作.一般window作为窗体,都用其子类Stage和PopupWindow. 看一下Window作为窗体的顶级类包含的一些共同属性 eventDispatcher setEventDispatcher(EventDispatcher value) focused

SDN 网络系统之 Mininet 与 API 详解

SDN 网络系统之 Mininet 与 API 详解 来源 https://www.ibm.com/developerworks/cn/cloud/library/1404_luojun_sdnmininet/ 更多资料 1. Mininet: http://mininet.org/ 2. Mininet wiki: https://github.com/mininet/mininet/wiki SDN 与 Mininet 概述 SDN 全名为(Software Defined Network)