百度地图的使⽤教程
内容介绍
1.了解地图的使⽤场景
2.百度地图介绍
3.显⽰案例
4.展⽰到公司路线案例
⼀、使⽤场景
地图的使⽤场景⾮常⼴泛。地图定位可以更直观的说明位置及周边环境，让⽤户更好的了解地理位置信息，导航功能更好的规划路径，以⽅便出⾏。定位，导航等成功互联⽹上最常见的功能之⼀。
例如：
链家地产：
wh.lianjia/ershoufang/104103030107.html
尚硅⾕官⽹：
www.atguigu/teacher_sz.shtml
这是⼀个很常见的技术，，房产位置，饭店，酒店等⾏业，只要是⽤户需要地⽅的时候，就可能出现地图技术的⾝影。涉及到我们⽣活的⽅⽅⾯⾯。
· 定位
· 地图
· 轨迹
· 路线规划
· 导航
· 路况
影⾳娱乐：
利⽤精准定位服务，获取⽤户位置，为⽤户推荐基于LBS的相关内容，推荐周边其他⽤户，增强⽤户社交属性，助⼒开发者为⽤户进⾏精准化营销推送。 例如：⽃鱼，唱吧，爱奇艺等
社交通讯：
为基于位置的社交应⽤提供附近的⼈、位置分享、个性化推荐，根据好友位置计算距离、路线规划等位置服务。 例如：陌陌，探探等
智能硬件：
以智能可穿戴、智能家居、智能交通设备和VR设备为代表，解决⽤户定位难题，助⼒开发者实现⽤户精准定位、远程定位、地理围栏监控提醒等功能。例如：⼩天才等
⽀持在APP端和可穿戴设备端同步显⽰导航信息，可查看清晰的路线指引及语⾳导航提⽰。 ⼿机APP端同时可以看到导航过程中的实时移
⽀持在APP端和可穿戴设备端同步显⽰导航信息，可查看清晰的路线指引及语⾳导航提⽰。 ⼿机APP端同时可以看到导航过程中的实时移动轨迹，实现全程守护。
存储海量轨迹、展⽰精准轨迹并记录⾏车图像，基于鹰眼为⽤户提供驾驶⾏为分析、车家互联等智能服务。 例如：滴滴打车等
电商购物：
基于⽤户的精确位置，为⽤户推荐商品，为⽤户⾃动填写收货地址，优化送货体验，通过精准定位实时查看运输位置。 例如：⼩⽶，苏宁等
⽤车服务：
提供出⾏⽤车服务，利⽤精准定位和位置描述，明确⽤车起点，帮助司机更好的到⽤车⽤户。
⽤地图服务，⽤户能够快速寻车、⽤车、还车，有效助⼒开发者提升整备车辆、运⼒调度、精准投放的效果。
专业的轨迹纠偏和⾥程计算服务帮助⽹约车平台校正⽤车计费 。
构建车队管理和运维平台，实现车辆轨迹追踪、车辆运⾏和停放区域监控、运维任务指派等⾃动化管理，提升运营效率。
例如：膜拜单车，邦德，货拉拉，曹操专车等。
⽣活服务：
利⽤精准定位服务，获取⽤户位置，推送周边服务。 例如：饿了么等
⽤地图服务吃的、玩的、房⼦、办事⽹点 。例如：美团。
在线旅游：
酒旅及智慧景区业务，⽀持各种⽅式导航前往⽬的地 。例如：携程。
共享出⾏： 例如：膜拜单车。
资讯娱乐：基于⽤户当前位置推荐同城／附近的资讯信息，实现基于位置的娱乐互动。 例如：快⼿。
智能穿戴： 例如：⼩天才。
物流：
物流车辆和快递员实时轨迹接⼊鹰眼，结合鹰眼地理围栏进⾏运输时效性考核、驾驶安全监控、道路收费校验、快递员⾏为考核，提升物流配送准时性和安全性。
利⽤驾车和电动车路线规划，为⽀⼲线物流和末端配送提供准确的路线规划、耗时预估和道路收费预测。 例如：圆通，邦德等
房产:
⽤户在查看房源时，通过路线规划查看房源与地铁、公交站、商场等⽣活设施的路线和距离，帮助⽤户合理置业。例如：贝壳，房天下。旅游:
⽤户在预定酒店、设计旅游线路时，通过路线规划分析酒店、景点、交通站点之间的路线距离，帮助⽤户更⾼效规划⾏程。例如：携程，航班管家等
智慧景区：
为新型智慧景区提供AR步⾏导航服务，开发者可⾃定义设置导航⼈物，让⽤户获得不同寻常的全新体验。
⼆、技术介绍
市⾯常见的地图API有很多，例如：
百度地图API ：lbsyun.baidu
⾼德地图API：lbs.amap
腾讯地图API：lbs.qq
搜狗地图API：map.sogou/api/
其中最常⽤的是⾼德地图API(阿⾥)和百度地图API。
这⾥要说的是百度地图API。
三、技术使⽤
我们主要学习⼏个技术的简单应⽤：定位技术、主要讲路径规划和导航。
1.账号说明
查看API地址：lbsyun.baidu
要先进⾏注册账号和申请密钥（ak）才可使⽤该服务，接⼝⽆使⽤次数限制，请放⼼使⽤
2.⼊门⼩DEMO
准备页⾯
您也可以根据需要选择其他类型的⽂档声明，这样浏览器会以标准的⽅式对页⾯进⾏渲染，保证页⾯最⼤的兼容性。我们不建议您使⽤quirks模式进⾏开发。
适应移动端页⾯展⽰
<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="api.map.baidu/api?v=3.0&ak=您的密钥"></script>
创建地图容器元素
<div id="container"></div>
创建地图实例
var map = new BMap.Map("container");
注意：
1.在调⽤此构造函数时应确保容器元素已经添加到地图上。
2.命名空间 API使⽤BMap作为命名空间，所有类均在该命名空间之下，⽐如：BMap.Map、BMap.Control、BMap.Overlay。
设置点坐标
var point = new BMap.Point(113.844656, 22.632231);
注意：在使⽤百度地图JavaScript API服务时，需使⽤百度BD09坐标，如使⽤其他坐标（ WGS84、GCJ02）进⾏展⽰，需先将其他坐标转换为BD09，详细说明请参考坐标转换说明，请勿使⽤⾮官⽅的转换⽅法
地图初始化，同时设置地图展⽰级别
⾄此，我们就快速创建了⼀张以天安门为中⼼的地图~
<!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}
margin属性怎么用#container{height:100%}
</style>
<script type="text/javascript" src="api.map.baidu/api?v=3.0&ak=1yGIc901IHvG65b3jGUu5nrkWUOYpT3c">
//v3.0版本的引⽤⽅式：src="api.map.baidu/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(113.844656, 22.632231);
// 创建点坐标
// 初始化地图，设置中⼼点坐标和地图级别
</script>
</body>
</html>
3.常见API
这样的⼀个地图并不能缩放，可以进⾏如下设置
可以给地图中的点添加标注，添加标注的时候要⼀个point(坐标)对象，把标注添加到坐标位置。
var marker = new BMap.Marker(point);        // 创建标注
map.addOverlay(marker);                    // 将标注添加到地图中
可以给当前标注添加点击事件
marker.addEventListener("click", function(){
alert("您点击了标注");
});
也可以把标注拖⾛
marker.addEventListener("dragend", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})
可以添加信息窗⼝
var opts ={
width : 250,    // 信息窗⼝宽度
height: 100,    // 信息窗⼝⾼度
title :"Hello"  // 信息窗⼝标题
}
var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息窗⼝对象
map.openInfoWindow(infoWindow, Center());      // 打开信息窗⼝
注意：相关的API有很多，并不需要我们全部都劳记，只要学会使⽤API⽂档，知道怎么样进⾏使⽤百度提供的对象就可以了。
四、案例说明
我们⽤现有的百度API做两个案例：
1.显⽰信息
步骤
1.得到公司的坐标。
2.当页⾯打开的时候，显⽰公司信息的窗⼝。
开发：
1.可以⽤标注拖拽的拖动事件得到坐标。
也可以⽤地址解析服务从地址转换到经纬度，也可以⽤点击事件来得到坐标。
// 创建地址解析器实例
var myGeo = new BMap.Geocoder();
// 将地址解析结果显⽰在地图上，并调整地图视野
if(point){
map.addOverlay(new BMap.Marker(point));
console.log(point.lng+" === "+point.lat);
}else{
console.log("没到地址。");
}
},
"深圳市");
这⾥采⽤地址解析服务从地址转换到经纬度。
var map = new BMap.Map("container");
map.addEventListener("click", function(e){
alert("当前位置：" + e.point.lng + ", " + e.point.lat);
}
);
得到的坐标是：
113.844656, 22.632231
参照Demo中的信息窗⼝⽰例案例，开发如下代码：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。