“jsextreme

2014年6月17日 (二) 14:01的版本

开始学习百度地图API最简单的方式是看一个简单的示例。以下给出展示一副简单地图的示例代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#l-map {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0"></script>
<title>显示地图</title>
</head>
<body>
<div id="l-map"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("l-map");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);
</script>

下面我们分步向您介绍：

准备页面

根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：

<!DOCTYPE html>

您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。

页面要在移动浏览器端正常显示，必须包含如下代码：

源码复制打印关于 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 接着我们设置样式，使地图充满整个浏览器窗口：

<style type="text/css">  
 body, html,#l-map {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}   
 </style>

引用百度地图API文件使用移动浏览器版JSAPI需要引用如下文件：

<script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0" type="text/javascript"></script>

创建地图容器元素地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。

命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。

创建地图实例

var map = new BMap.Map("l-map");

位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。

注意在调用此构造函数时应确保容器元素已经添加到地图上。

创建点坐标

var point = new BMap.Point(116.404, 39.915);

这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。

地图初始化 map.centerAndZoom(point, 14); 在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。地图必须经过初始化才可以执行其他操作。

地图被实例化并完成初始化以后，就可以对地图进行进行各种操作，如缩放、拖拽。

1.移动地图方法

map.enableDragging(); 以上方法默认开启，即无论设置还是不设置该方法，均可用手指拖动地图实现地图的移动。除以上方法外，以下两个方法也可以通过改变地图中心点实现地图的移动。

map.setCenter(new BMap.Point(116.409, 39.918));    
map.panTo(new BMap.Point(116.409, 39.918));

2.缩放地图方法

map.addControl(new BMap. ZoomControl ());

您除了可以在地图上双指缩放地图外，还可以通过添加缩放控件、操作缩放控件实现地图的缩放。

地图的运行和调试 如上代码保存时，选择utf-8的编码方式且后缀名存为html，之后将html页面放置到apache等网络服务器上，通过手机浏览器访问相应地址即可显示如下地图：

如果要调试代码，可以在PC端模拟移动端浏览器进行。以下以chrome浏览器为例说明PC端设置方式：

1. chrome浏览器下F12快捷键弹出如下调试工具：

2. 点击如上图右下角红框内的设置图标，弹出设置面板：

第一个红框用于设置PC端模拟的手机型号，如iOS4或者Android；第二个红框选择后，可以用鼠标模拟手指拖拽地图。

@@ 第92行： / 第92行： @@
 以上方法默认开启，即无论设置还是不设置该方法，均可用手指拖动地图实现地图的移动。 除以上方法外，以下两个方法也可以通过改变地图中心点实现地图的移动。
-<pre>
+<source>
 map.setCenter(new BMap.Point(116.409, 39.918));
 map.panTo(new BMap.Point(116.409, 39.918));
-</pre>
+</source>
 .缩放地图方法
-<pre>
+<source>
 map.addControl(new BMap. ZoomControl ());
-</pre>
+</source>
 {{bluepoint}}您除了可以在地图上双指缩放地图外，还可以通过添加缩放控件、操作缩放控件实现地图的缩放。<br/>