首先感谢酸奶姐(酸奶小妹),我从她的博客上学到很多。这篇文章是站在酸菜姐的肩膀上想出来的......笑......
这几天在老大的要求下学习了百度的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>
好的,就到这了,本人的心血呀。