首页 > 其他 > 详细

百度地图案例

时间:2019-12-06 14:13:29      阅读:94      评论:0      收藏:0      [点我收藏+]
<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>

百度地图案例

原文:https://www.cnblogs.com/tangzhizeishuai/p/11994708.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!