码迷,mamicode.com
首页 > Windows程序 > 详细

[百度地图API] 将多个点按照驾车路线连接并可以编辑路线

时间:2014-09-16 18:54:20      阅读:383      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   java   ar   for   div   

  首先感谢酸奶姐(酸奶小妹),我从她的博客上学到很多。这篇文章是站在酸菜姐的肩膀上想出来的......笑......

  这几天在老大的要求下学习了百度的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] 将多个点按照驾车路线连接并可以编辑路线

标签:style   blog   http   color   io   java   ar   for   div   

原文地址:http://www.cnblogs.com/lizhen24/p/3975477.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!