前端 - 百度地图 API 基础入门
请各位读者添加一下做者的微信公众号，之后有新的文章，将在微信公众号直接推送给各位，很是感谢。
javascript
##1.前言css
最近想完成一个网站，里面须要使用地图相关的内容。html
通过多方考虑，决定使用百度地图来完成，因此将整个学习历程进行简单的整理，方便朋友们来快速入门。java
本文系做者 李鹏（MR_LP）原创，转载请私信并在文章开头附带做者和原文地址连接。git
违者，做者保留追究权利。api
注：若代码中存在部分图片没法显示，请移步简书.浏览器
##2.获取密钥安全
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可以使用，接口（除发送短信功能外）无使用次数限制。微信
上述话术出自百度地图，咱们从上面的描述中也能够了解到，咱们在使用百度地图以前首先须要去注册一个属于本身的密钥。app
打开该网站后，咱们须要进行如下操做。
- 登陆百度帐号
- 建立应用
-
- 须要注意，咱们当前只是进行一次测试，因此在白名单中直接书写一个 星号便可（*）。
- 须要注意，建立的时候须要将 JavaScript API 选项进行勾选。
-
查看 AK
-
- 须要注意，请勿将这个 AK 展现给其余人，由于我这里只是给你们展现效果，因此就先不打码了。
-
##3. 获取JavaScript API服务方法
截止做者开始书写以前，百度地图 API 的版本为 V 2.0。
咱们在获取 API 以前须要首先完成注册 AK 才可成功加载API JS文件。
ak的使用方法以下：
//参数v表示您加载API的版本，使用JavaScript APIv1.4及之前版本可以使用此方式引用。
http://api.map.baidu.com/api?v=1.4
//使用JavaScript APIv2.0请先申请密钥ak，按此方式引用。
http://api.map.baidu.com/api?v=2.0&ak=您的密钥复制代码
其中须要注意：
- JavaScript API v1.4及之前版本无须申请密钥（ak）。
- 若是在实际开发中，须要获取更高配额，请点击申请认证企业用户。
最后，关于在引入的时候，有可能出现权限验证失败。
具体致使这个问题的缘由可能出自如下三种状况。
- 还没有在API控制台申请ak，即'...ak=';
- 密钥设置错误。
- 如E4805d16520de693a3fe707cdc962045为正确的ak
- 可是设置时输入的ak为E4805d16520de693a3fe707cdc962045xx;
- 密钥未经过白名单，以下图的ak在非baidu.com域名下会报错。
- API控制台关闭JavaScript API时会报错;
-
- 错误的使用“服务端AK”用于 JavaScript API，JS API只支持浏览器类型的ak（自2016年1月15日升级）
最后附上进入 百度地图 API javascript 的实例代码。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
<!--使用V2.0版本的引用方式-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY&s=1" type="text/javascript" charset="utf-8"></script>
<!--
1. 若是使用JavaScript API ，须要加一个特殊字段 (s=1)：
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
2. 对于Web API 无需加特殊字段，直接使用 HTTPS协议访问便可，如Geocoding：
https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥
&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
3. 若是对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露；
-->
<!--为了让页面以正常比例进行显示而且禁止用户缩放页面的操做-->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
</body>
</html>
<!--
个人秘钥
应用编号 应用名称 访问应用（AK） 应用类别 备注信息（双击更改） 应用配置
9290542 Test bsNyezahIIgpUIjvYe51BKXzy1FXozUY 浏览器端 设置 删除
-->复制代码
##4. 关于 百度地图 HTTPS 的说明
JavaScript API首家支持Https，已全面开放，无需申请Https服务可直接使用。
配置：
- 若是使用JavaScript API ，须要加一个特殊字段 (s=1)：
api.map.baidu.com/api?v=2.0&a… - 对于Web API 无需加特殊字段，直接使用 HTTPS协议访问便可，如Geocoding：
api.map.baidu.com/geocoder/v2… - 若是对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露。
##5. 百度地图的兼容性
- 浏览器：
- IE 6.0+
- Firefox 3.6+
- Opera 9.0+
- Safari 3.0+
- Chrome
- 操做系统：
- Windows
- Mac
- Linux
- 移动平台：
- iPhone
- Android
请各位开发者注意本身当前开发须要兼容的版本。
##6. 第一个小案例
在开始以前，我们首先经过一段实例代码进行效果的展现。
<!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>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及之前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>
</head>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
/*
建立地图实例
* 位于BMap命名空间下的Map类表示地图，经过new操做符能够建立一个地图实例。
* 其参数能够是元素id也能够是元素对象。
* 注意在调用此构造函数时应确保容器元素已经添加到地图上。*/
var map = new BMap.Map("container");
/*
建立点坐标
* 这里咱们使用BMap命名空间下的Point类来建立一个坐标点。
* Point类描述了一个地理坐标点，其中116.404表示经度，39.915表示纬度。*/
var point = new BMap.Point(116.404, 39.915);
/*
地图初始化
* 在建立地图实例后，咱们须要对其进行初始化，BMap.Map.centerAndZoom()方法要求设置中心点坐标和地图级别。
* 地图必须通过初始化才能够执行其余操做。*/
map.centerAndZoom(point, 15);
/*
下面示例显示一个地图，等待两秒钟后，它会移动到新中心点。
* panTo()
* 将让地图平滑移动至新中心点，若是移动距离超过了当前地图区域大小，则地图会直跳到该点。
* zoomTo()
*
* setCenter()
*
* */
window.setTimeout(function(){
map.panTo(new BMap.Point(116.450, 39.918));
}, 1000);
/*
默认状况下地图不支持鼠标滚轮缩放操做，由于这样可能会影响整个页面的用户体验，
可是若是您但愿在地图中使用鼠标滚轮控制缩放，则能够调用map.enableScrollWheelZoom方法来开启。
配置选项能够在Map类参考的配置方法一节中找到。
* */
</script>
</html>复制代码
能够看到，咱们若是须要使用百度地图，有至少三步操做须要完成。
- 建立地图实例
- 建立点坐标
- 地图初始化
在代码的最后段，放上一个方法，咱们经过一个超时调用，在 1 秒以后，让地图进行平移。
须要注意一个小问题，若是跳转的点处于当前初始的地图的显示范围时，则地图会进行平移，不然就是从新绘制当前地图。
最后显示效果以下：
##7. 百度地图控件
这时候咱们发现，咱们已经在当前页面实现了一个小的地图，可是咱们却发现一个小问题。
为何个人地图上空空一片呀。
这是由于咱们尚未向百度地图中添加咱们须要的控件。
地图API中提供的控件有：
- Control：控件的抽象基类，全部控件均继承此类的方法、属性。经过此类您可实现自定义控件。
- NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
- OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
- ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
- MapTypeControl：地图类型控件，默认位于地图右上方。
- CopyrightControl：版权控件，默认位于地图左下方。
- GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。
那么接下来咱们就开始向地图中去添加控件。
###7.1 添加控件
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript" charset="utf-8"> /* 向地图添加控件 * 可使用Map.addControl()方法向地图添加控件。 * 在此以前地图须要进行初始化。 * 例如，要将标准地图控件添加到地图中，可在代码中添加以下内容：*/ var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.addControl(new BMap.NavigationControl()); </script> </html>复制代码
实现效果以下：
咱们会发现，在咱们的地图左上角出现了一个新的控件，咱们能够经过这个控件去实现对地图的方法以及缩小。
除此以外，咱们还能够添加其余地图控件。
<!doctype html>
<html lang="en"> <head> <meta charset="UTF-8" /> <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</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=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> </head> <body> <div id="container"></div> </body> <script type="text/javascript" charset="utf-8"> /* 向地图添加控件 * 可使用Map.addControl()方法向地图添加控件。 * 在此以前地图须要进行初始化。 * 例如，要将标准地图控件添加到地图中，可在代码中添加以下内容：*/ var map = new BMap.Map("container"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // map.addControl(new BMap.NavigationControl()); /* 能够向地图添加多个控件。 在本例中咱们向地图添加一个平移缩放控件、一个比例尺控件和一个缩略图控件。 在地图中添加控件后，它们即刻生效。 * */ //地图平移缩放控件 map.addControl(new BMap.NavigationControl()); //比例尺控件 map.addControl(new BMap.ScaleControl()); //缩略地图控件 map.addControl(new BMap.OverviewMapControl()); //地图类型控件 map.addControl(new BMap.MapTypeControl()); map.setCurrentCity("北京"); // 仅当设置城市信息时，MapTypeControl的切换功能才能可用 </script> </html>复制代码
能够看到，咱们在原始的缩放控件以后去新增了三个新的控件。
实现效果以下：
除此以外，咱们还能够设置地图空间所显示的位置和偏移。
###7.2 控件的显示位置和偏移
ControlAnchor 此常量表示控件的定位。
| 常量 | 描述 |
|---|---|
| BMAP_ANCHOR_TOP_LEFT | 控件将定位到地图的左上角 |
| BMAP_ANCHOR_TOP_RIGHT | 控件将定位到地图的右上角 |
| BMAP_ANCHOR_BOTTOM_LEFT | 控件将定位到地图的左下角 |
| BMAP_ANCHOR_BOTTOM_RIGHT | 控件将定位到地图的右下角 |
实例代码：
//地图平移缩放控件
map.addControl(new BMap.NavigationControl({
anchor:BMAP_ANCHOR_TOP_RIGHT
}));复制代码
除了指定停靠位置外，还能够经过偏移量来指示控件距离地图边界有多少像素。
若是两个控件的停靠位置相同，那么控件可能会重叠在一块儿，这时就能够经过偏移值使两者分开显示。
var opts = {offset: new BMap.Size(150, 5)}
map.addControl(new BMap.ScaleControl(opts));复制代码
同时，咱们还能够修改控件的配置。
###7.3 控件的显示方式
NavigationControlType此常量表示平移缩放控件的类型。
| 常量 | 描述 |
|---|---|
| BMAP_NAVIGATION_CONTROL_LARGE | 标准的平移缩放控件（包括平移、缩放按钮和滑块） |
| BMAP_NAVIGATION_CONTROL_SMALL | 仅包含平移和缩放按钮 |
| BMAP_NAVIGATION_CONTROL_PAN | 仅包含平移按钮 |
| BMAP_NAVIGATION_CONTROL_ZOOM | 仅包含缩放按钮 |
实例代码：
//地图平移缩放控件
map.addControl(new BMap.NavigationControl({
//仅包含平移按钮
type:BMAP_NAVIGATION_CONTROL_PAN
}));复制代码
###7.4 关于百度地图控件的示例
最后放出一个关于百度定位相关控件的案例。
<!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 {width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{width:100%;height:100%;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
// 添加带有定位的导航控件
var navigationControl = new BMap.NavigationControl({
// 靠左上角位置
anchor: BMAP_ANCHOR_TOP_LEFT,
// LARGE类型
type: BMAP_NAVIGATION_CONTROL_LARGE,
// 启用显示定位
enableGeolocation: true
});
map.addControl(navigationControl);
// 添加定位控件
var geolocationControl = new BMap.GeolocationControl();
geolocationControl.addEventListener("locationSuccess", function(e){
// 定位成功事件
var address = '';
address += e.addressComponent.province;
address += e.addressComponent.city;
address += e.addressComponent.district;
address += e.addressComponent.street;
address += e.addressComponent.streetNumber;
alert("当前定位地址为：" + address);
});
geolocationControl.addEventListener("locationError",function(e){
// 定位失败事件
alert(e.message);
});
map.addControl(geolocationControl);
</script>复制代码
代码效果以下：
##8. 后记
其实今天只是介绍了一下百度最基础的部分。
除此以外，百度地图还能够去使用其余的特殊操做。
- 覆盖物
- 事件
- 地图图层
- 工具
- 服务
- 用户数据图层
- 全景图展示
- 定制个性地图
最后感谢百度地图的开发工程师。
转载请于文章开头处注明做者和原文连接，不然保留法律追究权利。
##附录：
A ： 鼠标滚轮缩放地图
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script> <title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.centerAndZoom("重庆",12); map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用 map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用 </script>复制代码
实现效果：
###B : 查询显示位置
<!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";font-size:14px;}
#l-map{height:300px;width:100%;}
#r-result{width:100%;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
<div id="l-map"></div>
<div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
function G(id) {
return document.getElementById(id);
}
var map = new BMap.Map("l-map");
map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。
var ac = new BMap.Autocomplete( //创建一个自动完成的对象
{"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){
map.clearOverlays(); //清除地图上全部覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
</script>复制代码
代码效果：
###C ： 根据经纬度肯定位置
<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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bsNyezahIIgpUIjvYe51BKXzy1FXozUY"></script>
<title>李鹏 -> QQ : 3206064928 (请勿非法转载)</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
map.enableScrollWheelZoom(true);
// 用经纬度设置地图中心点
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 建立标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
</script>复制代码
实现效果：
相关文章
- 1. 百度地图API入门1-申请百度API key
- 2. 百度地图API新手入门
- 3. 基于百度地图api + AngularJS 的入门地图
- 4. 【web端】百度地图api
- 5. 百度地图api入门，创建使用百度地图api及控件
- 6. 百度地图API
- 7. 百度地图api
- 8. 百度地图API学习（01）：基本入门指南
- 9. 百度地图 api
- 10. ----百度地图api----
- 更多相关文章...
- • Memcached入门教程 - NoSQL教程
- • Rust 基础语法 - RUST 教程
- • YAML 入门教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 安装cuda+cuDNN
- 2. GitHub的使用说明
- 3. phpDocumentor使用教程【安装PHPDocumentor】
- 4. yarn run build报错Component is not found in path “npm/taro-ui/dist/weapp/components/rate/index“
- 5. 精讲Haproxy搭建Web集群
- 6. 安全测试基础之MySQL
- 7. C/C++编程笔记：C语言中的复杂声明分析，用实例带你完全读懂
- 8. Python3教程(1)----搭建Python环境
- 9. 李宏毅机器学习课程笔记2：Classification、Logistic Regression、Brief Introduction of Deep Learning
- 10. 阿里云ECS配置速记
欢迎关注本站公众号,获取更多信息
相关文章
- 1. 百度地图API入门1-申请百度API key
- 2. 百度地图API新手入门
- 3. 基于百度地图api + AngularJS 的入门地图
- 4. 【web端】百度地图api
- 5. 百度地图api入门，创建使用百度地图api及控件
- 6. 百度地图API
- 7. 百度地图api
- 8. 百度地图API学习（01）：基本入门指南
- 9. 百度地图 api
- 10. ----百度地图api----