全部服务产品
开发者频道
服务升级
登录

文档全面上新

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

体验新版
 
(未显示1个用户的21个中间版本)
第1行: 第1行:
 
{{jspopular-sidebar}}
 
{{jspopular-sidebar}}
<h1>Hello World</h1>
+
<div class="bluetitle"><div class="services-title-text">百度地图的“Hello, World”</div></div><div class="serve-explain-text">
==百度地图的“Hello, World”==
+
开始学习百度地图API最简单的方式是看一个简单的示例。该示例帮助您快速了解百度地图API的基本使用,快速创建一张“我的地图”。
开始学习百度地图API最简单的方式是看一个简单的示例。以下代码创建了一个地图并以天安门作为地图的中心:
+
如下代码可以实现一个简单完整的全屏展示的地图Demo:</div><div class="prehtml"><!--代码区域--><pre class="prettyprint jsapidemo"><!DOCTYPE html>   
<syntaxhighlight lang="html4strict" line start="100" enclose="div">
+
<html>
 
+
<!DOCTYPE html>   
+
<html>
+
 
<head>   
 
<head>   
 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
第16行: 第13行:
 
#container{height:100%}   
 
#container{height:100%}   
 
</style>   
 
</style>   
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=您的密钥"></script>//此为v1.5版本的引用方式 
+
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥">
  // http://api.map.baidu.com/api?v=1.5&key=您的密钥&callback=initialize"; //此为v1.4版本及以前版本的引用方式 
+
//v2.0版本的引用方式:src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"
 +
</script>
 
</head>   
 
</head>   
 
+
 
<body>   
 
<body>   
 
<div id="container"></div>  
 
<div id="container"></div>  
 
<script type="text/javascript">  
 
<script type="text/javascript">  
var map = new BMap.Map("container");         // 创建地图实例   
+
var map = new BMap.Map("container");
var point = new BMap.Point(116.404, 39.915); // 创建点坐标   
+
// 创建地图实例   
map.centerAndZoom(point, 15);                 // 初始化地图,设置中心点坐标和地图级别   
+
var point = new BMap.Point(116.404, 39.915);
 +
// 创建点坐标   
 +
map.centerAndZoom(point, 15);
 +
// 初始化地图,设置中心点坐标和地图级别   
 
</script>   
 
</script>   
 
</body>   
 
</body>   
</html>  
+
</html>
 
+
</pre>
</syntaxhighlight>
+
<!--DEMO区域--><div class="addsomedemo"><div dir="https://mapopen-pub-jsapi.bj.bcebos.com/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>
 
+
'''准备页面'''
+
 
+
根据HTML标准,每一份HTML文档都应该声明正确的文档类型,我们建议您使用最新的符合HTML5规范的文档声明:
+
<pre>
+
<!DOCTYPE html>  
+
 
</pre>
 
</pre>
  
 
您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大的兼容性。我们不建议您使用quirks模式进行开发。
 
您也可以根据需要选择其他类型的文档声明,这样浏览器会以标准的方式对页面进行渲染,保证页面最大的兼容性。我们不建议您使用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" />   
下面我们添加一个meta标签,以便使您的页面更好的在移动平台上展示。
+
<pre>
+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />   
+
 
</pre>
 
</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}     
<pre>
+
    #container{height:100%}     
<style type="text/css">   
+
</style>  
html{height:100%}     
+
</pre>
body{height:100%;margin:0px;padding:0px}     
+
</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=2.0&ak=您的密钥"></script>
#container{height:100%}     
+
</pre>
</style>  
+
</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>
 
</pre>
  
'''引用百度地图API文件'''
+
<font color="red">注意:</font>
使用V1.4及以前版本的引用方式:
+
  
创建地图容器元素
+
1.在调用此构造函数时应确保容器元素已经添加到地图上。
地图需要一个HTML元素作为容器,这样才能展现到页面上。这里我们创建了一个div元素。
+
  
命名空间
+
2.命名空间 API使用BMap作为命名空间,所有类均在该命名空间之下,比如:BMap.Map、BMap.Control、BMap.Overlay。
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);  
 
+
'''创建地图实例'''
+
<pre class="js" name="code">
+
var map = new BMap.Map("container");
+
</pre>  
+
 
+
位于BMap命名空间下的Map类表示地图,通过new操作符可以创建一个地图实例。其参数可以是元素id也可以是元素对象。
+
 
+
注意在调用此构造函数时应确保容器元素已经添加到地图上。
+
 
+
'''创建点坐标'''
+
<pre class="js" name="code">
+
var point = new BMap.Point(116.404, 39.915);  
+
 
</pre>
 
</pre>
 
这里我们使用BMap命名空间下的Point类来创建一个坐标点。Point类描述了一个地理坐标点,其中116.404表示经度,39.915表示纬度。
 
  
'''地图初始化'''
+
<font color="red">注意:</font>在使用百度地图JavaScript API服务时,需使用百度BD09坐标,如使用其他坐标( WGS84、GCJ02)进行展示,需先将其他坐标转换为BD09,详细说明请参考坐标转换说明,请勿使用非官方的转换方法!!!
<pre class="js" name="code">
+
</div><div class="devguideorder"><span>9</span>地图初始化,同时设置地图展示级别</div><div class="devguidecenter">在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。<pre class="prettyprint codestyle">map.centerAndZoom(point, 15);   
map.centerAndZoom(point, 15);   
+
 
</pre>
 
</pre>
 +
</div></div><div class="serve-explain-text">至此,我们就快速创建了一张以天安门为中心的地图~</div><div class="bluetitle"><div class="services-title-text">地图配置与操作</div></div><div class="serve-explain-text">
 +
地图被实例化并完成初始化以后,就可以与其进行交互了。
  
在创建地图实例后,我们需要对其进行初始化,BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。 地图必须经过初始化才可以执行其他操作。
+
API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。
  
==地图配置与操作==
+
比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考中找到。
 
+
地图被实例化并完成初始化以后,就可以与其进行交互了。API中的地图对象的外观与行为与百度地图网站上交互的地图非常相似。它支持鼠标拖拽、滚轮缩放、双击放大等交互功能。您也可以修改配置来改变这些功能。 比如,默认情况下地图不支持鼠标滚轮缩放操作,因为这样可能会影响整个页面的用户体验,但是如果您希望在地图中使用鼠标滚轮控制缩放,则可以调用map.enableScrollWheelZoom方法来开启。配置选项可以在Map类参考的配置方法一节中找到。
+
  
 
此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。
 
此外,您还可以通过编程的方式与地图交互。Map类提供了若干修改地图状态的方法。例如:setCenter()、panTo()、zoomTo()等等。
  
下面示例显示一个地图,等待两秒钟后,它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
+
示例: 等待两秒钟后,地图它会移动到新中心点。panTo()方法将让地图平滑移动至新中心点,如果移动距离超过了当前地图区域大小,则地图会直跳到该点。
 
+
</div><pre class="prettyprint codestyle">var map = new BMap.Map("container");     
<source>
+
var point = new BMap.Point(116.404, 39.915);     
 
+
map.centerAndZoom(point, 15);     
var map = new BMap.Map("container");     
+
window.setTimeout(function(){
var point = new BMap.Point(116.404, 39.915);     
+
    map.panTo(new BMap.Point(116.409, 39.918));     
map.centerAndZoom(point, 15);     
+
}, 2000);
window.setTimeout(function(){  
+
</pre>
  map.panTo(new BMap.Point(116.409, 39.918));     
+
}, 2000);
+
 
+
</source>
+

2021年7月28日 (三) 17:34的最后版本

百度地图的“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=2.0&ak=您的密钥">
//v2.0版本的引用方式:src="https://api.map.baidu.com/api?v=2.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>

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

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=2.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);
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消