百度地图案例

<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: 700px;
width: 100%;
}
 
#r-result,
#r-result table {
width: 100%;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=你的Ak"></script>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<title>百度地图案例</title>
</head>
 
<body>
<div id="allmap"></div>
<div id="driving_way">
<select>
<option value="0">最少时间</option>
<option value="1">最短距离</option>
<option value="2">避开高速</option>
</select>
<input type="text" id="start" />
<input type="text" id="end" />
<input type="button" id="result" value="查询" />
</div>
<div id="r-result"></div>
</body>
 
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
 
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(); //启用滚轮放大缩小,默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
//三种驾车策略:最少时间,最短距离,避开高速
var routePolicy = [BMAP_DRIVING_POLICY_LEAST_TIME, BMAP_DRIVING_POLICY_LEAST_DISTANCE, BMAP_DRIVING_POLICY_AVOID_HIGHWAYS];
$("#result").click(function () {
var start = $("#start").val();
var end = $("#end").val();
// map.clearOverlays();
// var i = $("#driving_way select").val();
// search(start, end, routePolicy[i]);
// function search(start, end, route) {
// var driving = new BMap.DrivingRoute(map, { renderOptions: { map: map, autoViewport: true }, policy: route });
// driving.search(start, end);
// }
//公交出行方案
var transit = new BMap.TransitRoute(map, {
renderOptions: { map: map, panel: "r-result" }
});
transit.search(start, end);
});
</script>
posted @ 2019-12-06 13:31  _糖纸  阅读(376)  评论(0编辑  收藏  举报