Hello World | JSAPI 3.0 | 百度地图开放平台文档中心

您当前查看的是 JSAPI 3.0 历史版本文档。该版本仅用于维护现有项目，不建议用于新项目开发。新项目请使用 JSAPI 4.0，如需升级现有项目，请参考升级指南。
You are viewing the legacy JSAPI 3.0 documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.

百度地图的“Hello, World”

开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用，快速创建一张“我的地图”。
如下代码可以实现一个简单完整的全屏展示的地图Demo：


<!DOCTYPE html>  
<html>
    <head>  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Hello, World</title>  
        <style type="text/css">  
            html{height:100%}  
            body{height:100%;margin:0px;padding:0px}  
            #container{height:100%}  
        </style>  
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥">
            // v3.0版本的引用方式：src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
        </script>
    </head>  
     
    <body>  
        <div id="container"></div> 
        <script type="text/javascript"> 
            var map = new BMap.Map("container");
            // 创建地图实例  
            var point = new BMap.Point(116.404, 39.915);
            // 创建点坐标  
            map.centerAndZoom(point, 15);
            // 初始化地图，设置中心点坐标和地图级别  
        </script>  
    </body>  
</html>

DEMO详情

下面我们分步向您介绍如何快速开始地图开发：

1. 申请百度账号和ak

点我申请

2. 准备页面

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


<!DOCTYPE html>

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

3. 适应移动端页面展示

下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。


<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

4. 设置容器样式

设置容器样式大小，使地图充满整个浏览器窗口：


<style type="text/css">
    html{height:100%}
    body{height:100%; margin:0px; padding:0px}
    #container{height:100%}    
</style>

5. 引用百度地图API文件


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

6. 创建地图容器元素

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


<div id="container"></div>

7. 创建地图实例

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


var map = new BMap.Map("container");

注意：

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

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

8. 设置中心点坐标

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


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

注意：在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！

9. 地图初始化，同时设置地图展示级别

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


map.centerAndZoom(point,15);

至此，我们就快速创建了一张以天安门为中心的地图~

地图配置与操作

地图被实例化并完成初始化以后，就可以与其进行交互了。
API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。
此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
示例：等待两秒钟后，地图它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直接跳到该点。


var map = new BMap.Map("container");
var point = new BMap.Point(116.404,39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function() {
    map.panTo(new BMap.Point(116.409,39.918));
},2000);

使用须知

坐标转换说明

本篇文章对您是否有帮助？

百度地图的“Hello, World”

地图配置与操作