实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度地图为您导航</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="http://api.map.baidu.com/api?v=2.0&ak=wWFsgDz7grOrY27jlRzr9opkaqdklG6c"></script>
<script src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
</head>
<style>
*{font-family: 微软雅黑;border: 0;margin: 0;padding: 0}
*{outline: none}
html{height:100%}
body{height:100%;}
#pl{width: 100%;height: 500px;}
.title{text-align: center;line-height: 40px;}
.ss{position: fixed;top: 20px;z-index: 9999;left: 20%;width: 100%;height: 400px; overflow-y:scroll;}
.ss input,#but{width: 50%;height: 40px;float: left;}
#close{font-size: 28px;float: right;margin: 30px;z-index: 99999}
.sr{width: 60%;height: 40px;overflow: hidden;}
#results,#r-result,#r-results{width: 60%;height: 300px;}
ul{width: 100%; list-style: none;border: 1px solid #f2f2f2;}
ul li{width: 33.3%;height: 40px;float: left;text-align: center;line-height: 40px;}
ul li:hover{background: #f40;color: #fff}
.select{width: 100%;position: fixed;bottom: 0;}
</style>
<body>
<div id="pl"></div><!-- 地图展示 -->
<div class="ss">
<div class="sr"><input type="text" id="input" placeholder="想要去哪里？"><button id="but">确定</button></div>
<div id="results"></div><!-- 开车面板展示 -->
<div id="r-result"></div><!-- 公交面板展示 -->
<div id="r-results"></div><!-- 步行面板展示 -->
</div>
<!-- 选择出行方式 -->
<div class="select">
<ul>
<li id="drive">驾车</li>
<li id="bus">公交</li>
<li id="walk">步行</li>
</ul>
</div>
<!-- <div id="log"></div> -->
</body>
<script>
//一、
var map = new BMap.Map("pl"); // 创建地图实例
var point = new BMap.Point(0,0); // 创建点坐标
map.centerAndZoom(point, 20); // 初始化地图，设置中心点坐标和地图级别
//添加控件
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.addControl(new BMap.NavigationControl()); // 启用放大缩小 尺
map.addControl(new BMap.GeolocationControl()); //移动端
//二、
var place;
var geolocation = new BMap.Geolocation();//地理位置
geolocation.enableSDKLocation();// 开启SDK辅助定位
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var myIcon = new BMap.Icon("icon.png", new BMap.Size(30,30));//设置图标信息
var mk = new BMap.Marker(r.point,{icon:myIcon});//创建标注对象
map.addOverlay(mk);
map.panTo(r.point);
//一来就展示地理位置
var myGeo = new BMap.Geocoder(); // 根据坐标得到地址描述
myGeo.getLocation(r.point, function(result){
if (result){
place=result.address;//返回的地理位置
var label = new BMap.Label(place,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
}
})
mk.enableDragging();// 开启拖拽功能icon
mk.addEventListener('dragend',function(e){//添加拖拽事件
myGeo.getLocation(e.point, function(result){
if (result){
place=result.address;//返回的地理位置
}
mk.addEventListener("click", function(e) {
map.removeOverlay(mk.getLabel());//删除之前的label
var label = new BMap.Label(rs.address,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
});
mk.addEventListener("dragend", function(e){ //icon拖拽事件
map.removeOverlay(mk.getLabel());//删除之前的label
var label = new BMap.Label(place,{offset:new BMap.Size(20,-10)});
mk.setLabel(label);
})
});
})
}
else {
alert('failed'+this.getStatus());
}
});
//三、
map.addEventListener("dragend", function(e){//返回信息面板
$("#results").hide();
$("#r-result").hide();
$("#r-results").hide();
})
//选择出行方式
$("#drive").click(function(){
$("#results").show();
$("#r-result").hide();
var driving = new BMap.DrivingRoute(map, {
renderOptions: {
map: map,
autoViewport: true,
panel : "results"
}
});
var output = "从"+place+"到"+$("#input").val();
var searchComplete = function (results){
if (transit.getStatus() != BMAP_STATUS_SUCCESS){
return ;
}
var plan = results.getPlan(0);
output += plan.getDuration(true) + "\n"; //获取时间
output += "总路程为：" ;
output += plan.getDistance(true) + "\n"; //获取距离
}
var transit = new BMap.DrivingRoute(map, {renderOptions: {map: map},
onSearchComplete: searchComplete,
onPolylinesSet: function(){
setTimeout(function(){alert(output)},"1000");
}});
transit.search(place,$("#input").val());
driving.search(place, $("#input").val());
})
$("#bus").click(function(){
$("#results").hide();
$("#r-result").show();
var transit = new BMap.TransitRoute(map, {
renderOptions: {map: map, panel: "r-result"}
});
transit.search(place, $("#input").val());
})
$("#walk").click(function(){
$("#results").hide();
$("#r-result").hide();
$("#r-results").show();
var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map, panel: "r-results", autoViewport: true}});
walking.search(place, $("#input").val());
})
//四、全景控件
var stCtrl = new BMap.PanoramaControl();
stCtrl.setOffset(new BMap.Size(20, 20));
map.addControl(stCtrl);
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
