第一步
我们先去百度搜索百度地图api根据文档申请产品秘钥
申请成功后百度地图会给你个产品密码
<script src="http://api.map.baidu.com/api?ak=填写你自己的产品秘钥&v=2.0&services=false"></script>
然后我们就可以使用了
先简单点吧，根据地图api文档我们就能实现自己想要的效果了
image.png
之前先说下H5定位吧，不管我们使用什么地图都是需要用这个的
geolocation 这个方法是H5新增特性，专门用来实现客户端地理定位的
//判断是否支持 获取本地位置
if (navigator.geolocation) {
var n = navigator.geolocation.getCurrentPosition(function(res){
console.log(res); // 需要的坐标地址就在res中
});
} else {
alert('该浏览器不支持定位');
}
if(navigator.geolocation){//判断是否支持H5定位
var geolocation=new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus()==BMAP_STATUS_SUCCESS){
console.log(r);//打印下这行代码，里面有位置信息
var lat=r.address.lat//当前经度
var lng=r.address.lng//当前纬度
var province=r.address.province //返回当前省份
var city=r.address.city//返回当前城市
}
})
}
else{
alert("定位失败");
}
创建地图实例
<div class="container"></div>//这里是你要显示的地图 注意要设置宽高
<script>
var map = new BMap.Map("container");
console.log(r);//输出这个可以看到很多位置信息
var point1 = new BMap.Point(114.144802,22.620315);// 根据用户当前坐标 创建地图实例
map.centerAndZoom(point1, 16); // 初始化地图，设置中心点坐标和地图级别
</script>
计算两个地点之前的距离
var map = new BMap.Map("container");
var point1 = new BMap.Point(114.128026,22.608011);
map.centerAndZoom(point1, 16); // 初始化地图，设置中心点坐标和地图级别
var point2 = new BMap.Point(114.144802,22.620315);
var distance = map.getDistance(point1,point2); //获得两点间的距离 单位米
console.log(distance);
两点之间连线
<script>
var map = new BMap.Map("container");
var point1 = new BMap.Point(114.128026,22.608011);
map.centerAndZoom(point1, 16); // 初始化地图，设置中心点坐标和地图级别
var polyline = new BMap.Polyline([
new BMap.Point(114.128026,22.608011),//起始点的经纬度
new BMap.Point(114.144802,22.620315)//终止点的经纬度
], {strokeColor:"red",//设置颜色
strokeWeight:3, //宽度
strokeOpacity:0.5});//透明度map.addOverlay(polyline);//两点间连线
在地图上添加小图标与文字描述
<!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" />
<title></title>
<script src="http://api.map.baidu.com/api?v=2.0&ak=Go9SQWsVYtKy74jrHVsGIwzHTN49kF9T"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js "></script>
<style>
.describe{
text-align: center;
width:201px;
height:24px;
line-height: 24px;
background:#D9221F;
opacity:0.9;
border-radius:12px;
font-size: 12px;
color: #FFFFFF;
position: absolute;
top: 140px;
left: 30px;
}
#allmap{width:1192px;height:355px;margin-top: 70px;margin-bottom: 183px;}
.BMap_cpyCtrl {display:none;}/*调用百度地图api 去掉地图左下角LOGO或文字*/
.anchorBL{display:none;}
</style>
</head>
<body>
<!-- 地图 -->
<div id="allmap">
</div>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(114.025974, 22.546054);
map.centerAndZoom(point, 12);
//创建小图标
var myIcon = new BMap.Icon("./images/contact_daohang.png", new BMap.Size(300,157));//图标
var marker = new BMap.Marker(point,{icon:myIcon}); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
//添加文字描述
var html = ["<div class='describe'>车亿百（深圳）信息科技有限公司</div>"];
var infoBox = new BMapLib.InfoBox(map,html.join(""),{
boxStyle:{
width: "270px",height: "210px"
},
closeIconMargin: "1px 1px 0 0",
enableAutoPan: true,
align: INFOBOX_AT_TOP
});
map.addOverlay(marker);
infoBox.open(marker);
marker.enableDragging();
</script>
</body>
</html>
