前言
对比百度地图的api和微信的api，发现百度的api特通俗易懂，微信的就真的不想多说什么了。今天就针对百度地图api做了一个小小的功能模块，有很多的不足，但是功能实现了以及界面达到了自己想要的样子，心里还是蛮开心的。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>租房系统-酒店定位</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<style>
body{
margin:0px;
padding:0px;
}
#map{
100%;
height: 250px;
margin-top: 10px;
}
.container{
padding: 0px;
}
.panel{
margin-bottom: 10px;
border: none;
}
.panel-heading{
background-color: deepskyblue !important;
color: #fff !important;
}
.panel-body{
background-color: #EFEFEF !important;
}
.panel-group{
margin-bottom: 5px;
}
.panel-collapse .panel-body .row :first-child,.panel-collapse .panel-body .row :nth-child(3){
font-weight: 800;
}
</style>
<body >
<div class="container-fluid">
<div id="map"></div>
<div style="margin-top: 10px;color: #337ab7;">|搜索周边</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="可输入餐厅、商店、加油站..." id="sercher">
<span class="input-group-addon" style="padding: 0px;"><a href="#" class="btn btn-primary" style="border-radius: 0px 4px 4px 0px;" onclick="select()">搜索</a></span>
</div>
<div style="margin-top: 10px;color: #337ab7">|路线推荐</div>
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon" style="padding: 6px 0px;"><a href="#" onclick="myLocation()" class="btn btn-primary" style="display: inline;padding: 6px 24px;border-radius: 4px 0px 0px 4px;">定位</a></span>
<input id="myLocation" type="text" class="form-control" placeholder="请输入当前位置">
<span class="input-group-addon" style="padding: 6px 0px;"><a href="#" onclick="gotoHouse()" class="btn btn-primary" style="display: inline;padding: 6px 24px;border-radius: 0px 4px 4px 0px;">去租房</a></span>
</div>
</form>
<div class="panel panel-primary" style="margin-top: 10px;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<div class="container">
驾车路线
</div>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<div class="container" style="font-size: 12px;" id="car">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-top: 10px;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<div class="container">
公交路线
</div>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="container" style="font-size: 12px;" id="bus">
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-primary" style="margin-top: 10px;">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<div class="container">
步行路线
</div>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="container" style="font-size: 12px;" id="walk">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图ak"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var map = null;
//酒店位置
var point = null;
//我的位置
var mylocation = null;
$(document).ready(function(){
map = new BMap.Map("map");
point = new BMap.Point(113.476898,23.02429);
//地图初始化，中心点坐标和地图级别
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("卡度尼大厦"); // 设置地图显示的城市 此项是必须设置的
map.enableContinuousZoom(true); // 开启连续缩放效果
map.enableInertialDragging(true); // 开启惯性拖拽效果
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.enableKeyboard(true);
//添加控件
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));
map.addControl(new BMap.NavigationControl());
//标注物
var marker = new BMap.Marker(point);
marker.disableMassClear();
map.addOverlay(marker);
map.centerAndZoom(point, 16);
//事件
map.addEventListener("click", function(e){
var center = map.getCenter();
console.log('点击的坐标为：',e.point.lng+','+e.point.lat);
//point = new BMap.Point(e.point.lng,e.point.lat);
//map.centerAndZoom(new BMap.Point(e.point.lng,e.point.lat),16)
//map.setCenter(point);
});
});
//检索
function select(){
//清除障碍物
map.clearOverlays();
var text = document.getElementById('sercher').value;
var local = new BMap.LocalSearch(map,
{renderOptions: {map: map,autoViewport: true}});
local.searchNearby(text, point);
}
function myLocation(){
//浏览器定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(r.point);
mk.disableMassClear();
map.addOverlay(mk);
map.panTo(r.point);
//逆地址解析
var geoc = new BMap.Geocoder();
geoc.getLocation(r.point, function(rs){
var addComp = rs.addressComponents;
$('#myLocation').val(addComp.province+'-'+addComp.city+'-'+addComp.district);
console.log('逆地址解析：',addComp);
mylocation = r.point;
//alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
})
//alert('您的位置：'+r.point.lng+','+r.point.lat);
}else {
alert('定位失败：'+this.getStatus());
} });
}
function gotoHouse(){
//驾车路线规划
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
panel : "car",
autoViewport: true
}
});
if(!mylocation){
alert('请输入我的位置');
return ;
}
if(!point){
alert('没有定义终点位置');
}
driving.search(mylocation,point);
//公交路线规划
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "bus"}
});
transit.search(mylocation,point);
//步行路线规划
var walk = new BMap.WalkingRoute(map, {
renderOptions: {map: map, panel: "walk"}
});
walk.search(mylocation,point);
}
</script>