百度地图API的接入

百度地图API的接入

1. 前言

地图技术在如今的互联网世界应用场景十分广泛。互联网用户基于地图定位技术可以更加直观地了解周边环境信息以及地理位置信息，为用户旅游、出行规划出更方便更快捷的路径。今天就在这里记录一下如何在项目中接入百度地图API。

---

2.常用的地图API

以下是几款目前常用的地图API:
①百度地图API ：传送门
②高德地图API：传送门
③腾讯地图API：传送门
④搜狗地图API：传送门
其中最常用的是高德地图API(阿里)和百度地图API。

---

3.技术使用

3.1 注册成为开发者

第一步：进入到百度地图开放平台，地址在上面已经给出。

第二步：点击右上角的控制台，进去后会弹出一个开发者注册页面。

第三步：点击成为个人开发者。
第四步：阅读认证声明。
第五步：注册账号。
第六步：完善开发者信息，并认证。

---

3.2 具体使用过程

第一步：点击开发文档，找到JavaScript API，详细的开发文档可以参考这里的。
第二步：再次点击进入控制台，找到应用管理。
第三步：进入我的应用，然后点击创建应用。
第四步：填写应用名称和应用类型，并勾选所需的服务，并限制访问的白名单后提交。
白名单可以根据自己的需要进行填写，这里我没有做限制。
第五步：提交成功之后我们就可以看到自己的应用AK了
到这里我们已经基本完成了开发前的准备工作，下面我们就可以根据官方给出的开发文档来实现我们的需求了。

---

3.3 Demo准备

下面我们就来完成一个入门的案例，来练练手。
第一步：准备好页面

<!DOCTYPE html>

这里可以使用其他类型的文档声明，浏览器会以标准的方式来渲染页面，保证页面最大的兼容性。

第二步：适应移动端页面展示

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

第三步： 设置在页面上的地图容器样式

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

第四步：引用百度地图API文件

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

第五步：创建地图容器元素

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

第六步：创建地图实例

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

第七步 ：设置坐标点

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

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

8.地图初始化，设置地图展示的级别

map.centerAndZoom(point, 15);  

上图的步骤成功渲染出了一张一北京天安门为中心的地图，功能比较简单，下面是所有的代码，其中添加了其他的功能，可根据注释进行了解。如果有需要添加的功能，可以根据开发文档进行添加

<!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="http://api.map.baidu.com/api?v=3.0&ak=vnRCeghE3y3QyndkRwt1BkigBUdoTvno">
</script>
</head>
    <body>
         <!--第五步-->
        <div id="container">
        </div>
        <script type="text/javascript">
        //第六步 
        var map = new BMap.Map("container");
		   //开启鼠标滚轮缩放
		    map.enableScrollWheelZoom(true);     
        // 第七步 设置坐标点
        var point = new BMap.Point(113.844656, 22.632231);
			   // 创建标注   
			   var marker = new BMap.Marker(point); 
			    //拖动标注，显示当前标注点所在的地理位置
			     marker.enableDragging();    
			     //拖动坐标点并显示坐标点所在的位置
	         marker.addEventListener("dragend", function(e){    
	         alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
	        });

			   // 将标注添加到地图中 
	        map.addOverlay(marker);             
		     //标注点添加点击事件
		     marker.addEventListener("click", function(){    
          alert("您点击了标注");    
         }); 
         // 第八步 初始化地图，设置中心点坐标和地图级别
         map.centerAndZoom(point, 15);
        </script>
    </body>
</html>