百度地图API详解之移动平台开发的最佳实践
|
这是百度地图API详解系列文章的第二篇，主要介绍如何在iPhone和Android平台上使地图API进行开发（这里指的是在浏览器端执行的Javascript版本API）。 大部分情况下，在iPhone和Android上开发与PC上开发没有两样，开发者调用API的代码都是一样的，这里主要介绍如何针对移动设备的特点更好的开发地图应用，以及介绍一些与移动平台相关的API。 建议移动平台的开发者仔细阅读一遍Safari Web Content Guide和Web Applications系列文章， 他们会告诉你移动Web开发的基本知识。 构建页面 下面我们开始构建移动平台的地图。首先我们声明文档类型为HTML5： <!DOCTYPE html> 目前iPhone和Android平台的浏览器都能较好的支持HTML5标准，因此建议移动页面都声明为HTML5文档类型。 接着调整页面的显示比例，在html页面中增加下面的meta标签： <metaname="viewport"content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 这里将页面的显示比例调整为1:1，并且禁止用户通过双指缩放页面。其中minimum-scale和maximum-scale用来防止在设备旋转时页面发生缩放。下面我们添加地图容器： <div id="container"></div> 和样式： html{height:100%} body{height:100%;margin:0px;padding:0px} #container{height:100%} 注意到我们给地图容器指定了100%的宽和高，这样做一方面是让地图区域尽可能大，方便用户操作；另一方面是因为目前移动版的浏览器的API还不完善，如果地图没有充满屏幕会导致bug（主要是手指操作时位置会出现偏差，如果你的地图展示不需要移动、缩放，那么不充满屏幕也没有影响）。 接下来我们初始化地图，其实代码和PC上没有差别： var map = new BMap.Map("container"); // 创建Map实例 var point = new BMap.Point(116.404, 39.915); // 创建点坐标 map.centerAndZoom(point,15); // 初始化地图，设置中心点坐标和地图级别。 你将在iPhone（iPhone3截图）中看到如下效果，即使设备旋转地图也能正常显示：
高解析度 众所周知，iPhone4和iPhone3相比，在同样物理尺寸的情况下，宽度和高度分辨率各扩大了一倍，你会发现同样的地图在iPhone3和iPhone4上显示效果是不同的。下面是iPhone4的屏幕截图（此图为实际尺寸的50%）：
你会发现地图图片有点儿发虚。这是因为iPhone4的屏幕分辨率为960x640，而你的页面尺寸仍旧在480x320模式下，就是说地图图片被拉伸了。为了在iPhone4这样的高分辨率设备上更清晰的展示地图，在创建地图对象时可以通过配置参数开启高解析度模式： var map = new BMap.Map("container", {enableHighResolution: true}) 注意，即使你开启了高解析度模式，在iPhone3等普通屏幕上还是按照原先的样式显示，也就是说只有真正的高分辨率设备才能使用此模式。 在Android平台上，手机种类、型号更为丰富，因此不同的手机的分辨率、物理尺寸都不同，我们可统一使用dpi来衡量，高dpi的手机也可以开启高解析度地图模式。下面是同一设备开启高解析度前后的对比效果（为实际尺寸的50%）：
在高解析度模式下，你所使用的元素（包括HTML元素、图片等）都应该在宽度和高度上都应该进行扩大，在iPhone4上应各扩大一倍，在Android上应各扩大为原来的1.5倍。否则元素在浏览器中会显得比较小，不论从视觉上还是操作上都影响用户体验。比如你设置的标注图标大小为23x26，那么在iPhone4的高解析度模式下你的图标尺寸应扩大到46x52。怎么知道地图在用户的设备上是否真正处于高解析度模式呢？很简单，通过map的highResolutionEnabled方法即可判断。当且仅当你开启了高解析度模式并且设备确实支持的时候此方法返回true。需要注意的是，在高解析度模式模式下地图图块数量会增加，用户访问的速度以及流量都会受到一些影响。 用户操作 惯性拖拽是个很酷的效果，当用户手指在移动地图后从设备表面抬起的时候，地图还会根据用户刚才手指的移动方向和力度再移动一小段距离。仿佛整个地图图层具有惯性效果。这个功能通过调用map的enableInertialDragging方法即可开启。在iPhone上，用户可通过双指对地图进行缩放和移动，你也可以通过map的enablePinchToZoom来确定是否开启该功能（默认开启）。而在Android平台上，由于目前还没有开放双指操作相关的API，因此建议在此平台上的地图中增加两个按钮用来控制地图的放大和缩小，同时也需要考虑高解析度模式按钮尺寸的问题。 文章来源：http://jz1108.cnblogs.com/ （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
