浏览器版本低！无法浏览完整内容，建议升级或更换浏览器。

文档全面上新

更科技的视觉体验，更高效的页面结构，快前往体验吧！

体验新版
第1行： 第1行：
 
{{jspopularV3-sidebar}}
 
{{jspopularV3-sidebar}}
−
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span style="color: #FF0000;">使用须知</span></div></div></div><div class="serve-explain-text">JavaScript API v3.0 是在 v2.0 的基础上进行开发的，并针对2.0的一些接口进行了升级，为开发者提供更完善的服务。v3.0的绝大部分接口向下兼容，开发者仅需要修改版本参数 （v=3.0） 就可以切换到JavaScript API v3.0版本。具体版本差异请参考如下说明：</div>
+
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>百度地图的“Hello, World”</span></div></div></div><div class="serve-explain-text">
−
{|
+
开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用，快速创建一张“我的地图”。
−
|-
+
如下代码可以实现一个简单完整的全屏展示的地图Demo：</div><div class="prehtml"><!--代码区域--><pre class="prettyprint jsapidemo"><!DOCTYPE html> 
−
| '''功能'''
+
<html>
−
| '''接口'''
+
<head> 
−
| '''v2.0'''
+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
−
| '''v3.0'''
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
−
|-
+
<title>Hello, World</title> 
−
| 公交换乘规划
+
<style type="text/css"> 
−
| TransitRoute
+
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=您的密钥">
−
| Geolocation
+
//v3.0版本的引用方式：src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"
−
| 支持
+
</script>
−
| 定位策略优化
+
</head> 
−
|-
+
−
| colspan="1" | 自定义绘制层
+
<body> 
−
| colspan="1" | CanvasLayer
+
<div id="container"></div>
−
| colspan="1" | 不支持
+
<script type="text/javascript">
−
| colspan="1" | 支持，可以自定义贴合底图的canvas和WebGL覆盖物
+
var map = new BMap.Map("container");
−
|-
+
// 创建地图实例 
−
| 驾车线路规划
+
var point = new BMap.Point(116.404, 39.915);
−
| DrivingRoute
+
// 创建点坐标 
−
| 支持
+
map.centerAndZoom(point, 15);
−
| 暂不支持起终点为关键字、途径点
+
// 初始化地图，设置中心点坐标和地图级别 
−
|-
+
</script> 
−
| 骑行线路规划
+
</body> 
−
| RidingRoute
+
</html>
−
| 不支持
+
</pre>
−
| 支持
+
<!--DEMO区域--><div class="addsomedemo"><div dir="https://lbs.baidu.com/cms/jsapi/demo/helloworld.html"></div><div class="top_right">[https://lbs.baidu.com/jsdemo.htm#a1_2 DEMO详情]</div></div></div>
−
|}
+
下面我们分步向您介绍如何快速开始地图开发：
 +
<div class="devguide"><div class="leftborderbg" style="height:5000px;"></div><div class="devguideorder"><span>1</span>申请百度账号和ak</div><div class="devguidecenter">[https://lbs.baidu.com/apiconsole/key 点我申请]</div><div class="devguideorder"><span>2</span>准备页面</div><div class="devguidecenter">根据HTML标准，每一份HTML文档都应该声明正确的文档类型，我们建议您使用最新的符合HTML5规范的文档声明：<pre class="prettyprint codestyle"><!DOCTYPE html>
 +
</pre>
  
 +
您也可以根据需要选择其他类型的文档声明，这样浏览器会以标准的方式对页面进行渲染，保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
 +
</div><div class="devguideorder"><span>3</span>适应移动端页面展示</div><div class="devguidecenter">下面我们添加一个meta标签，以便使您的页面更好的在移动平台上展示。<pre class="prettyprint codestyle"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
 +
</pre>
 +
</div><div class="devguideorder"><span>4</span>设置容器样式</div><div class="devguidecenter">设置容器样式大小，使地图充满整个浏览器窗口：<pre class="prettyprint codestyle"><style type="text/css"> 
 +
    html{height:100%}   
 +
    body{height:100%;margin:0px;padding:0px}   
 +
    #container{height:100%}   
 +
</style>
 +
</pre>
 +
</div><div class="devguideorder"><span>5</span>引用百度地图API文件</div><div class="devguidecenter"><pre class="prettyprint codestyle"><script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
 +
</pre>
 +
</div><div class="devguideorder"><span>6</span>创建地图容器元素</div><div class="devguidecenter">地图需要一个HTML元素作为容器，这样才能展现到页面上。这里我们创建了一个div元素。<pre class="prettyprint codestyle"><div id="container"></div>
 +
</pre>
 +
</div><div class="devguideorder"><span>7</span>创建地图实例</div><div class="devguidecenter">位于BMap命名空间下的Map类表示地图，通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。<pre class="prettyprint codestyle">var map = new BMap.Map("container");
 +
</pre>
  
−
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>移动平台上的地图应用开发</span></div></div></div><div class="serve-explain-text">
+
<font color="red">注意：</font>
−
JavaScript API支持iPhone、Android这样的移动平台。用户通过手机浏览器就可以访问由地图API创建出来的应用。移动平台的屏幕尺寸通常比PC或笔记本要小，操作方式也有所不同。为了更好的在手机浏览器上展示地图，我们有如下建议：
+
  
−
{{bluepoint}}将地图容器高设置为100%，使其充满整个屏幕，或者您也可以计算浏览器窗口的大小并进行设置。
+
1.在调用此构造函数时应确保容器元素已经添加到地图上。
  
−
{{bluepoint}}添加下面的meta标签： &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 这样做是为了让页面以正常比例进行显示并且禁止用户缩放页面的操作。
+
2.命名空间 API使用BMap作为命名空间，所有类均在该命名空间之下，比如：BMap.Map、BMap.Control、BMap.Overlay。
−
 
+
</div><div class="devguideorder"><span>8</span>设置中心点坐标</div><div class="devguidecenter">这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。（为天安门坐标）<pre class="prettyprint codestyle">var point = new BMap.Point(116.404, 39.915);  
−
您可以参考 [https://developer.apple.com Apple's Developer documentation] 和 [http://developer.android.com/index.html Android documentation] 获得更多信息。
+
</pre>
−
 
+
−
http://developer.baidu.com/map/static/img/js-apiv14-phone.jpg
+
−
 
+
−
移动端开发具体实现请参考[[:jspopular/js-download|相关下载_示例代码]]提供的Demo源码。
+
−
</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>异步加载</span></div></div></div><div class="serve-explain-text">JavaScript API支持异步加载，您可以在引用脚本的时候添加callback参数，当脚本加载完成后callback函数会被立刻调用。请参考下面的使用示例：</div><pre class="prettyprint codestyle"><!DOCTYPE html> 
+
−
<html> 
+
−
<head> 
+
−
<meta charset="utf-8"/> 
+
−
<title>异步加载</title> 
+
−
<script type="text/javascript"> 
+
−
function initialize() { 
+
−
  var mp = new BMap.Map('map'); 
+
−
  mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
+
−
} 
+
−
 
+
−
function loadScript() { 
+
−
  var script = document.createElement("script"); 
+
−
  script.src = "https://api.map.baidu.com/api?v=2.0&ak=您的密钥&callback=initialize";
+
−
  document.body.appendChild(script); 
+
−
} 
+
−
 
+
−
window.onload = loadScript; 
+
−
</script> 
+
−
</head> 
+
−
<body></body> 
+
−
</html>  
+
  
 +
<font color="red">注意：</font>在使用百度地图JavaScript API服务时，需使用百度BD09坐标，如使用其他坐标（ WGS84、GCJ02）进行展示，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使用非官方的转换方法！！！
 +
</div><div class="devguideorder"><span>9</span>地图初始化，同时设置地图展示级别</div><div class="devguidecenter">在创建地图实例后，我们需要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。<pre class="prettyprint codestyle">map.centerAndZoom(point, 15); 
 
</pre>
 
</pre>
−
<div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>兼容性</span></div></div></div><div class="serve-explain-text">
+
</div></div><div class="serve-explain-text">至此，我们就快速创建了一张以天安门为中心的地图~</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>地图配置与操作</span></div></div></div><div class="serve-explain-text">
−
{{bluepoint}}浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
+
地图被实例化并完成初始化以后，就可以与其进行交互了。
  
−
{{bluepoint}}操作系统：Windows、Mac、Linux
+
API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
  
−
{{bluepoint}}移动平台：iPhone、Android
+
比如，默认情况下地图不支持鼠标滚轮缩放操作，因为这样可能会影响整个页面的用户体验，但是如果您希望在地图中使用鼠标滚轮控制缩放，则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。
−
</div><div class="bluetitle"><div class="serve-explain-text"><div class="service-page-anchor"><span>获取技术支持途径</span></div></div></div><div class="serve-explain-text">
+
−
如果您在使用百度地图API中遇到问题，请尝试通过以下途径解决：
+
  
−
{{bluepoint}}确认您使用了正确的地图API地址。
+
此外，您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如：setCenter()、panTo()、zoomTo()等等。
  
−
{{bluepoint}}访问百度地图[http://bbs.lbsyun.baidu.com/ API论坛]，查找相关问题的帖子，或者将您的问题发布到贴吧中。
+
示例： 等待两秒钟后，地图它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点，如果移动距离超过了当前地图区域大小，则地图会直跳到该点。
−
 
+
</div><pre class="prettyprint codestyle">var map = new BMap.Map("container");   
−
{{bluepoint}}查看[[:jspopular/qa|常见问题]]。
+
var point = new BMap.Point(116.404, 39.915);   
−
</div>
+
map.centerAndZoom(point, 15);   
 +
window.setTimeout(function(){
 +
    map.panTo(new BMap.Point(116.409, 39.918));   
 +
}, 2000);
 +
</pre>

2022年8月19日 (五) 13:41的版本

百度地图的“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");

注意：

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

2.命名空间 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);
取自“http://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/usage&oldid=17600”

  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误，或对此文档有更好的建议，请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消