百度地图API多点连线行程

最新推荐文章于 2021-08-04 22:48:34 发布

游语

最新推荐文章于 2021-08-04 22:48:34 发布

阅读量5k

点赞数

文章标签：百度地图

本文链接：https://blog.csdn.net/qq_26400953/article/details/56294529

版权

一个项目涉及百度地图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>

实现的效果：

游语

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
15
评论
百度地图API多点连线行程

一个项目涉及百度地图API的使用，在行程这块遇到了问题。我们步行有多个目标，我们需要一个个走过去，我们需要步行的线路图。直接输入起点终点肯定是不行的，因为我们不止一个目标，那么我们需要怎么做呢？参考了网上一些朋友说可以拆开来，我们假设从A->B->C，那么我们可以先从A->B画一段，B->C再画一段。这个思路也是博主最开始的思路，但是我们有两个问题:1:直接画两段步行只会显示一段。解
复制链接

扫一扫