首页 > 代码库 > [百度地图API] 将多个点按照驾车路线连接并可以编辑路线
[百度地图API] 将多个点按照驾车路线连接并可以编辑路线
首先感谢酸奶姐(酸奶小妹)，我从她的博客上学到很多。这篇文章是站在酸菜姐的肩膀上想出来的......笑......
这几天在老大的要求下学习了百度的API，自己摸索着一个多星期，终于大概的了解了，然后又拜读了许多大神的博客，终于写出了比较能满足老大需求的代码。
开头的CSS，我也是看百度的DEMO写的，本人菜鸟，css待学习。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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=B6fojzn9uGYSqSwombXh1fTZ"></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 = []; //折线点的集合
看下边有人会问为什么要不断嵌套，直接循环去得到p的值不行？这还真不行！因为我发现每个driver search完成的顺序是不一定的，有可能时(myP1,myP2)先完成，也有可能是(myP2,myP3)先完成，与你写的顺序无关。所以用循环，会产生很多结果。(望有大神指导一下，解决这个问题)。
1 var driver = new BMap.DrivingRoute(map); 2 driver.search(myP1, myP2); 5 6 driver.setSearchCompleteCallback(function () { 7 var pots = driver.getResults().getPlan(0).getRoute(0).getPath(); 8 p = p.concat(pots); 9 driver.search(myP2, myP3);10 driver.setSearchCompleteCallback(function () {11 var pots = driver.getResults().getPlan(0).getRoute(0).getPath();12 p = p.concat(pots);13 driver.search(myP3, myP4);14 driver.setSearchCompleteCallback(function () {15 var pots = driver.getResults().getPlan(0).getRoute(0).getPath();16 p = p.concat(pots);17 18 var polyline = new BMap.Polyline(p);19 map.addOverlay(polyline);20 21 var menu = new BMap.ContextMenu();22 var textMenuItem = [23 {24 text: "折线可编辑",25 callback: function () { polyline.enableEditing(); }26 },27 {28 text: "折线不可编辑",29 callback: function () { polyline.disableEditing(); }30 },31 {32 text: "编辑完成",33 callback: function () {34 var points = polyline.getPath();44 }45 ];46 for (var i = 0; i < textMenuItem.length; i++) {47 menu.addItem(new BMap.MenuItem(textMenuItem[i].text, textMenuItem[i].callback, 100));48 }49 map.addContextMenu(menu);50 });51 });52 });65 </script>66 67 </body>68 </html>
好的，就到这了，本人的心血呀。
[百度地图API] 将多个点按照驾车路线连接并可以编辑路线