一个项目涉及百度地图API的使用,在行程这块遇到了问题。我们有多个目的地,我们需要一个个过去,我们需要行程线路图。直接输入起点终点肯定是不行的,因为我们不止一个目标,那么我们需要怎么做呢?
参考了网上一些朋友说可以拆开来,我们假设从A->B->C,那么我们可以先从A->B画一段,B->C再画一段。这个思路也是博主最开始的思路,但是我们有两个问题:
1:直接画两段只会显示一段。
解决方案:
setSearchCompleteCallback回调事件,可以显示两段了。
2:我们这样可以显示多段但是起点终点driver search之后是不一样的。
解决方案:
嵌套。
借用LZ每天进步一点点 的代码:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<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: 1000px;
width: 100%;
}
#control {
width: 100%;
}
</style>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=2.0&ak=VV174l1kOMtbCb3fvu16Ayyox4dYtcGT"></script>
<title>路线的生成</title>
</head>
<body>
<div id="allmap"></div>
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(117.138596, 36.680859);
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom();
var myP1 = new BMap.Point(117.132165, 36.679128); //雅居园
var myP2 = new BMap.Point(117.138598, 36.680855); //齐鲁软件园
var myP3 = new BMap.Point(117.141957, 36.675133); //科汇大厦
var myP4 = new BMap.Point(117.14767, 36.669966); //建设银行
var p = []; //折线点的集合
var driver = new BMap.DrivingRoute(map);
driver.search(myP1, myP2);
driver.setSearchCompleteCallback(function () {
var pots = driver.getResults().getPlan(0).getRoute(0).getPath();
p = p.concat(pots);
driver.search(myP2, myP3);
driver.setSearchCompleteCallback(function () {
var pots = driver.getResults().getPlan(0).getRoute(0).getPath();
p = p.concat(pots);
driver.search(myP3, myP4);
driver.setSearchCompleteCallback(function () {
var pots = driver.getResults().getPlan(0).getRoute(0).getPath();
p = p.concat(pots);
var polyline = new BMap.Polyline(p);
map.addOverlay(polyline);
var menu = new BMap.ContextMenu();
var textMenuItem = [
{
text: "折线可编辑",
callback: function () { polyline.enableEditing(); }
},
{
text: "折线不可编辑",
callback: function () { polyline.disableEditing(); }
},
{
text: "编辑完成",
callback: function () {
var points = polyline.getPath();}
}];
for (var i = 0; i < textMenuItem.length; i++) {
menu.addItem(new BMap.MenuItem(textMenuItem[i].text, textMenuItem[i].callback, 100));
}
map.addContextMenu(menu);
});
});
});
</script>
</body>
</html>
实现的效果: