• 首页
  • 技术
  • 旅行
  • 车模
  • 关于

JZ's Blog

{技术, 绘画, 旅行, 摄影, 多肉}
  • 首页
  • 技术
  • 旅行
  • 车模
  • 关于
首页  /  地图API  /  百度地图API详解之移动平台开发的最佳实践
17 六月 2011

百度地图API详解之移动平台开发的最佳实践

作者:jz1108
地图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截图)中看到如下效果,即使设备旋转地图也能正常显示:

b59947f432da6186f2d38598

c51a7b106531cba3c2ce7970

高解析度

众所周知,iPhone4和iPhone3相比,在同样物理尺寸的情况下,宽度和高度分辨率各扩大了一倍,你会发现同样的地图在iPhone3和iPhone4上显示效果是不同的。下面是iPhone4的屏幕截图(此图为实际尺寸的50%):

2eb48031f3aa37f75fdf0edf

你会发现地图图片有点儿发虚。这是因为iPhone4的屏幕分辨率为960x640,而你的页面尺寸仍旧在480x320模式下,就是说地图图片被拉伸了。为了在iPhone4这样的高分辨率设备上更清晰的展示地图,在创建地图对象时可以通过配置参数开启高解析度模式:

var map = new BMap.Map("container", {enableHighResolution: true});

这时再来看iPhone4的效果(这回我们以960x640的实际尺寸展示):

209b0c4eef319195d0c86a7b

注意,即使你开启了高解析度模式,在iPhone3等普通屏幕上还是按照原先的样式显示,也就是说只有真正的高分辨率设备才能使用此模式。

在Android平台上,手机种类、型号更为丰富,因此不同的手机的分辨率、物理尺寸都不同,我们可统一使用dpi来衡量,高dpi的手机也可以开启高解析度地图模式。下面是同一设备开启高解析度前后的对比效果(为实际尺寸的50%):

1c89ab2b270f30a5e6cd409d

在高解析度模式下,你所使用的元素(包括HTML元素、图片等)都应该在宽度和高度上都应该进行扩大,在iPhone4上应各扩大一倍,在Android上应各扩大为原来的1.5倍。否则元素在浏览器中会显得比较小,不论从视觉上还是操作上都影响用户体验。比如你设置的标注图标大小为23x26,那么在iPhone4的高解析度模式下你的图标尺寸应扩大到46x52。怎么知道地图在用户的设备上是否真正处于高解析度模式呢?很简单,通过map的highResolutionEnabled方法即可判断。当且仅当你开启了高解析度模式并且设备确实支持的时候此方法返回true。需要注意的是,在高解析度模式模式下地图图块数量会增加,用户访问的速度以及流量都会受到一些影响。

用户操作

惯性拖拽是个很酷的效果,当用户手指在移动地图后从设备表面抬起的时候,地图还会根据用户刚才手指的移动方向和力度再移动一小段距离。仿佛整个地图图层具有惯性效果。这个功能通过调用map的enableInertialDragging方法即可开启。在iPhone上,用户可通过双指对地图进行缩放和移动,你也可以通过map的enablePinchToZoom来确定是否开启该功能(默认开启)。而在Android平台上,由于目前还没有开放双指操作相关的API,因此建议在此平台上的地图中增加两个按钮用来控制地图的放大和缩小,同时也需要考虑高解析度模式按钮尺寸的问题。

 Previous Article 临摹作品一幅
Next Article   用CSS3打造HTML5的logo

相关文章

  • 百度地图API详解之公交路线规划

    2011年11月6日
  • 百度地图API详解之坐标系转换

    2011年10月11日
  • 百度地图API详解之自定义地图类型

    2011年10月8日

留言

取消回复

近期文章

  • 记录一次解决 no buffer is bound to enabled attribute 报错的过程
  • TypeScript 中的装饰器
  • iOS 13 Safari 的一些变化
  • WebGL 文章汇总
  • 高性能 WebGL —— 使用 ImageBitmap 提升纹理性能

近期评论

  • jz1108发表在《记录一次解决 no buffer is bound to enabled attribute 报错的过程》
  • xiangnan发表在《记录一次解决 no buffer is bound to enabled attribute 报错的过程》
  • lew发表在《WebGL绘制详解之五:Stencil Buffer》
  • jz1108发表在《WebGL基础绘制之一:绘制一个点》
  • jz1108发表在《WebGL 文章汇总》

文章归档

  • 2021年三月
  • 2019年十一月
  • 2019年九月
  • 2019年三月
  • 2018年十二月
  • 2018年十一月
  • 2018年十月
  • 2017年十一月
  • 2017年十月
  • 2017年九月
  • 2017年五月
  • 2017年四月
  • 2017年三月
  • 2017年二月
  • 2017年一月
  • 2016年十一月
  • 2016年十月
  • 2016年四月
  • 2016年三月
  • 2016年二月
  • 2016年一月
  • 2015年十二月
  • 2015年十一月
  • 2015年十月
  • 2015年九月
  • 2015年八月
  • 2015年七月
  • 2015年六月
  • 2015年三月
  • 2014年十二月
  • 2014年十一月
  • 2014年十月
  • 2014年八月
  • 2014年七月
  • 2014年六月
  • 2014年五月
  • 2014年四月
  • 2014年三月
  • 2014年二月
  • 2014年一月
  • 2013年十二月
  • 2013年十一月
  • 2013年十月
  • 2013年九月
  • 2013年八月
  • 2013年七月
  • 2013年六月
  • 2013年五月
  • 2013年四月
  • 2013年三月
  • 2013年二月
  • 2013年一月
  • 2012年十二月
  • 2012年十月
  • 2012年九月
  • 2012年七月
  • 2012年六月
  • 2012年五月
  • 2012年一月
  • 2011年十一月
  • 2011年十月
  • 2011年九月
  • 2011年八月
  • 2011年七月
  • 2011年六月
  • 2011年五月
  • 2011年四月
  • 2011年二月
  • 2011年一月
  • 2010年十二月
  • 2010年十月
  • 2010年九月
  • 2010年六月
  • 2010年五月
  • 2010年四月
  • 2010年三月
  • 2010年二月
  • 2010年一月
  • 2009年十二月
  • 2009年十一月
  • 2009年九月
  • 2009年八月
  • 2009年六月
  • 2009年三月
  • 2009年二月
  • 2009年一月

分类目录

  • 地图API
  • 多肉
  • 开发
  • 技术
  • 摄影
  • 旅行
  • 未分类
  • 汽车
  • 绘画
  • 美食
  • 车模
  • 随笔

功能

  • 登录
  • 文章RSS
  • 评论RSS
  • WordPress.org
© Copyright 2015. Theme by BloomPixel.