最近项目需要结合用到百度地图,需求是在地图实现多个点步行连线问题;因为百度有提供两点之间的步行路径图,以及沿线的坐标点信息;初步设想是首先把各个点的步行路径画出来,然后得到这条线路的坐标信息集合,然后通过百度地图的另外一个做直线接口重新把完整线路绘画出来;
如果你对百度地图的API知识不是很了解,可以查看http://developer.51cto.com/art/201110/298662.htm,里面有比较详细的介绍;
百度地图API开发者地址:http://developer.baidu.com/map/jshome.htm
一:通过结合下面两个百度实例来实现我们所要求的功能;
1:两点间步行实例:http://developer.baidu.com/map/jsdemo.htm#i6_1
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>步行导航检索</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search("天坛公园", "故宫");
</script>
2:折线实例:http://developer.baidu.com/map/jsdemo.htm#c1_5
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>折线</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var polyline = new BMap.Polyline([
new BMap.Point(116.399, 39.910),
new BMap.Point(116.405, 39.920),
new BMap.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
</script>
二:多点步行路径连线实例（完整的代码如下，都有相应说明,实例定义三个点）
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body, html
{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
}
#allmap
{
height: 50%;
width: 40%;
float: left;
border-right: 2px solid #bcbcbc;
}
#r-result
{
height: 100%;
width: 55%;
float: left;
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script>
<script type="text/javascript">
</script>
</head>
<body>
<input id="btn_show" type="button" value="button" />
<div id="allmap">
</div>
<%--style="display:none"--%>
<div id="r-result">
</div>
</body>
</html>
<script type="text/javascript">
//定义集合用来存放沿线的坐标值
var chartData = [];
//加载地图
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(118.10000, 24.46667), 11);
var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} });
var startpoint = new BMap.Point(118.112917, 24.435153);
var endpoint = new BMap.Point(118.1086487, 24.439108);
walking.search(startpoint, endpoint);
//通过setSearchCompleteCallback回调事件可以把步行间的坐标信息获取
walking.setSearchCompleteCallback(function (rs) {
var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
for (var i = 0; i < pts.length; i++) {
chartData.push(new BMap.Point(pts[i].lat, pts[i].lng));
}
});
//另外两点的步行路线
var walkings = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} });
var twoPoint = new BMap.Point(118.1286555, 24.4491888);
walkings.search(endpoint, twoPoint);
walkings.setSearchCompleteCallback(function (rs) {
var pts = walkings.getResults().getPlan(0).getRoute(0).getPath();
for (var i = 0; i < pts.length; i++) {
chartData.push(new BMap.Point(pts[i].lat, pts[i].lng));
}
});
//用来存放途经点的坐标
var viaRouteData = [];
viaRouteData.push(endpoint);
$(function () {
$("#btn_show").click(function () {
//这边故意让它晚一秒运行，因为上面获取坐标信息是比较慢又是异步
setTimeout(ShowRoute, 1000);
});
});
function ShowRoute() {
var firstPoint;
var endPoint;
var newChartData = [];
//对坐标点重新定义
$.each(chartData, function (item, value) {
newChartData.push(new BMap.Point(value.lat, value.lng));
});
//为了获得起点及终点的坐标值,方便对它进行文字处理
firstPoint = newChartData[0];
endPoint = newChartData[newChartData.length - 1];
//加载地图
var maps = new BMap.Map("r-result");
maps.centerAndZoom(new BMap.Point(118.10000, 24.46667), 15);
//把步行线路的坐标集合转化成折线
var polyline = new BMap.Polyline(newChartData, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 });
maps.addOverlay(polyline);
//对起点、终点、途经点做一个简单的处理，泡泡跟文字提示
var m1 = new BMap.Marker(firstPoint);
var m2 = new BMap.Marker(endPoint);
maps.addOverlay(m1);
maps.addOverlay(m2);
var lab1 = new BMap.Label("起点", { position: firstPoint });
var lab2 = new BMap.Label("终点", { position: endPoint });
maps.addOverlay(lab1);
maps.addOverlay(lab2);
$.each(viaRouteData, function (item, value) {
var m = new BMap.Marker(value);
maps.addOverlay(m);
var lab = new BMap.Label("途经点", { position: value });
maps.addOverlay(lab);
});
}
</script>
左边是使用步行接口显示的三点连线地图,两点间都会标识起点跟终点,所以要是有多点地图上就会出现很为起点、终点的标志；右边这张是通过修改以后的地图；
百度地图之多点步行路径连线问题
时间： 2024-08-09 20:33:37