|
|
| 第1行： |
第1行： |
| − | {{jsextrem-sidebar}}
| + | #REDIRECT [[jsextreme/guide/introduction]] |
| − | ==百度地图的“Hello, World”==
| + | |
| − | | + | |
| − | 开始学习百度地图API最简单的方式是看一个简单的示例。以下给出展示一副简单地图的示例代码：
| + | |
| − | | + | |
| − | <syntaxhighlight lang="html4strict" line start="100" enclose="div">
| + | |
| − | | + | |
| − | <!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>
| + | |
| − | </syntaxhighlight>
| + | |
| − | | + | |
| − | 下面我们分步向您介绍：
| + | |
| − | | + | |
| − | '''准备页面'''
| + | |
| − | | + | |
| − | 根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：
| + | |
| − | <pre>
| + | |
| − | <!DOCTYPE html>
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | 您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
| + | |
| − | | + | |
| − | 页面要在移动浏览器端正常显示，必须包含如下代码：
| + | |
| − | | + | |
| − | 源码复制打印关于
| + | |
| − | <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
| + | |
| − | 接着我们设置样式，使地图充满整个浏览器窗口：
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <style type="text/css">
| + | |
| − | body, html,#l-map {width: 100%;height: 100%;overflow: hidden;hidden;margin:0;}
| + | |
| − | </style>
| + | |
| − | </pre>
| + | |
| − |
| + | |
| − | 引用百度地图API文件
| + | |
| − | 使用移动浏览器版JSAPI需要引用如下文件：
| + | |
| − | | + | |
| − | <pre>
| + | |
| − | <script src="http://api.map.baidu.com/api?type=quick&ak=您的密钥&v=1.0" type="text/javascript"></script>
| + | |
| − | </pre>
| + | |
| − | 申请ak请访问如下页面：http://lbsyun.baidu.com/apiconsole/key。
| + | |
| − | | + | |
| − | 创建地图容器元素
| + | |
| − | 地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。
| + | |
| − | | + | |
| − | 命名空间
| + | |
| − | API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
| + | |
| − | | + | |
| − | '''创建地图实例'''
| + | |
| − | <pre>
| + | |
| − | var map = new BMap.Map("l-map");
| + | |
| − | </pre>
| + | |
| − | | + | |
| − | 位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
| + | |
| − | | + | |
| − | 注意在调用此构造函数时应确保容器元素已经添加到地图上。
| + | |
| − | | + | |
| − | '''创建点坐标'''
| + | |
| − | <pre>
| + | |
| − | var point = new BMap.Point(116.404, 39.915);
| + | |
| − | </pre>
| + | |
| − | 这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。
| + | |
| − | | + | |
| − | '''地图初始化'''
| + | |
| − | map.centerAndZoom(point, 14);
| + | |
| − | 在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
| + | |
| − | | + | |
| − | ==地图缩放与移动==
| + | |
| − | | + | |
| − | 地图被实例化并完成初始化以后，就可以对地图进行进行各种操作，如缩放、拖拽。
| + | |
| − | | + | |
| − | '''1.移动地图方法'''
| + | |
| − | | + | |
| − | map.enableDragging();
| + | |
| − | 以上方法默认开启，即无论设置还是不设置该方法，均可用手指拖动地图实现地图的移动。 除以上方法外，以下两个方法也可以通过改变地图中心点实现地图的移动。
| + | |
| − | | + | |
| − | <source>
| + | |
| − | map.setCenter(new BMap.Point(116.409, 39.918));
| + | |
| − | map.panTo(new BMap.Point(116.409, 39.918));
| + | |
| − | </source>
| + | |
| − | 2.缩放地图方法
| + | |
| − | | + | |
| − | <source>
| + | |
| − | map.addControl(new BMap. ZoomControl ());
| + | |
| − | </source>
| + | |
| − | {{bluepoint}}您除了可以在地图上双指缩放地图外，还可以通过添加缩放控件、操作缩放控件实现地图的缩放。<br/>
| + | |
| − | | + | |
| − | '''地图的运行和调试'''
| + | |
| − | 如上代码保存时，选择utf-8的编码方式且后缀名存为html，之后将html页面放置到apache等网络服务器上，通过手机浏览器访问相应地址即可显示如下地图：
| + | |
| − | | + | |
| − | | + | |
| − | 如果要调试代码，可以在PC端模拟移动端浏览器进行。以下以chrome浏览器为例说明PC端设置方式：
| + | |
| − | | + | |
| − | 1. chrome浏览器下F12快捷键弹出如下调试工具：
| + | |
| − | | + | |
| − | 2. 点击如上图右下角红框内的设置图标，弹出设置面板：
| + | |
| − | | + | |
| − | 第一个红框用于设置PC端模拟的手机型号，如iOS4或者Android；第二个红框选择后，可以用鼠标模拟手指拖拽地图。
| + | |
NEW !
