百度地图之多点步行路径连线问题

2023-10-12 09:30
文章标签 问题 路径 百度 地图 多点 连线 步行

本文主要是介绍百度地图之多点步行路径连线问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

原文：http://www.cnblogs.com/wujy/p/3897501.html#undefined

一:通过结合下面两个百度实例来实现我们所要求的功能;

1:两点间步行实例:http://developer.baidu.com/map/jsdemo.htm#i6_1 

复制代码 
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>步行导航检索</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
var walking = new BMap.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
walking.search("天坛公园", "故宫");
</script>
复制代码

 

2:折线实例:http://developer.baidu.com/map/jsdemo.htm#c1_5

复制代码 
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>折线</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
var polyline = new BMap.Polyline([new BMap.Point(116.399, 39.910),new BMap.Point(116.405, 39.920),new BMap.Point(116.425, 39.900)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
</script>
复制代码

 

二:多点步行路径连线实例（完整的代码如下，都有相应说明,实例定义三个点）

复制代码 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title><style type="text/css">body, html{width: 100%;height: 100%;overflow: hidden;margin: 0;}#allmap{height: 50%;width: 40%;float: left;border-right: 2px solid #bcbcbc;}#r-result{height: 100%;width: 55%;float: left;}</style><script src="jquery-1.3.2.min.js" type="text/javascript"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script><script type="text/javascript"></script>
</head>
<body><input id="btn_show" type="button" value="button" /><div id="allmap"></div><%--style="display:none"--%><div id="r-result"></div>
</body>
</html>
<script type="text/javascript">//定义集合用来存放沿线的坐标值var chartData = [];//加载地图var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(118.10000, 24.46667), 11);var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} });var startpoint = new BMap.Point(118.112917, 24.435153);var endpoint = new BMap.Point(118.1086487, 24.439108);walking.search(startpoint, endpoint);//通过setSearchCompleteCallback回调事件可以把步行间的坐标信息获取walking.setSearchCompleteCallback(function (rs) {var pts = walking.getResults().getPlan(0).getRoute(0).getPath();for (var i = 0; i < pts.length; i++) {chartData.push(new BMap.Point(pts[i].lat, pts[i].lng));}});//另外两点的步行路线var walkings = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true} });var twoPoint = new BMap.Point(118.1286555, 24.4491888);walkings.search(endpoint, twoPoint);walkings.setSearchCompleteCallback(function (rs) {var pts = walkings.getResults().getPlan(0).getRoute(0).getPath();for (var i = 0; i < pts.length; i++) {chartData.push(new BMap.Point(pts[i].lat, pts[i].lng));}});//用来存放途经点的坐标var viaRouteData = [];viaRouteData.push(endpoint);$(function () {$("#btn_show").click(function () {//这边故意让它晚一秒运行，因为上面获取坐标信息是比较慢又是异步setTimeout(ShowRoute, 1000);});});function ShowRoute() {var firstPoint;var endPoint;var newChartData = [];//对坐标点重新定义$.each(chartData, function (item, value) {newChartData.push(new BMap.Point(value.lat, value.lng));});//为了获得起点及终点的坐标值,方便对它进行文字处理firstPoint = newChartData[0];endPoint = newChartData[newChartData.length - 1];//加载地图var maps = new BMap.Map("r-result");maps.centerAndZoom(new BMap.Point(118.10000, 24.46667), 15);//把步行线路的坐标集合转化成折线var polyline = new BMap.Polyline(newChartData, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5 });maps.addOverlay(polyline);//对起点、终点、途经点做一个简单的处理，泡泡跟文字提示var m1 = new BMap.Marker(firstPoint);var m2 = new BMap.Marker(endPoint);maps.addOverlay(m1);maps.addOverlay(m2);var lab1 = new BMap.Label("起点", { position: firstPoint });var lab2 = new BMap.Label("终点", { position: endPoint });maps.addOverlay(lab1);maps.addOverlay(lab2);$.each(viaRouteData, function (item, value) {var m = new BMap.Marker(value);maps.addOverlay(m);var lab = new BMap.Label("途经点", { position: value });maps.addOverlay(lab);});}
</script>
复制代码

左边是使用步行接口显示的三点连线地图,两点间都会标识起点跟终点,所以要是有多点地图上就会出现很为起点、终点的标志；右边这张是通过修改以后的地图；

 

编辑修改于2014-08-12

上面实例中会存在一个问题,因为如果我们存在有多点情况下会进行for循环把每两个点的路线画出来,并得到这种路线的坐标集合;不过因为获取坐标集合百度地图API是通过回调函数实现;这边不得不面对一个FOR循环里包含回调方法,导致获得坐标集合顺序会出现问题;会出现如下图那样,有些点之间错乱,图在多出一些直接;

 

结合上面出现的问题对相应代码进行调整:

复制代码 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title></title><script src="Scripts/jquery-1.8.2.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script><script type="text/javascript">$(function (){$("#btn_Show").click(function () {showMap();});});var chartData = [];function showMap() {var startSce = $("#<%=tb_Start.ClientID%>").val();var EndSce = $("#<%=tb_End.ClientID%>").val();var viaArray = $("#<%=tb_via.ClientID%>").val();$.ajax({type: "get",data: { startSce: startSce, viaArray: viaArray, EndSce: EndSce },datatype: "json",url: "Handler1.ashx",async: false,success: function (userInfo) {var abc = $.parseJSON(userInfo);$.each(abc, function (item, value) {chartData.push(new BMap.Point(value.lan, value.yan));})for (var i = 0; i < chartData.length-1; i++) {var startPoint = chartData[i];var endPoint = chartData[i + 1];showPath(startPoint, endPoint);}$.each(abc, function (item, value) {var firstPoint = new BMap.Point(value.lan, value.yan);var m1 = new BMap.Marker(firstPoint);maps.addOverlay(m1);var lab1 = new BMap.Label(item+1, { position: firstPoint });maps.addOverlay(lab1);});}});}function showPath(startPoint, EndPoint){var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });walking.search(startPoint, EndPoint);walking.setSearchCompleteCallback(function (rs) {var abc = rs;var pts = walking.getResults().getPlan(0).getRoute(0).getPath();maps.addOverlay(new BMap.Polyline(pts, { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1 }));});}</script>
</head>
<body><form id="form1" runat="server">起点:<asp:TextBox ID="tb_Start" runat="server"></asp:TextBox>途经点(以"|"进行分隔):<asp:TextBox ID="tb_via" runat="server" Width="295px"></asp:TextBox>终点:<asp:TextBox ID="tb_End" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="确认" OnClick="Button1_Click" /><br /><br />结果显示:<asp:Label ID="lb_message" runat="server"></asp:Label></form><br /><br /><input id="btn_Show" type="button" value="显示步行路线" />步行路径图:<div id="allmap" style=" height:900px; width:1000px"></div><br /><br />修改后的路径图:<div id="r-result" style=" height:500px; width:900px"></div>
</body>
</html><script type="text/javascript">var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(118.075367, 24.44583), 15);map.addControl(new BMap.ScaleControl());map.addControl(new BMap.NavigationControl());var maps = new BMap.Map("r-result");maps.centerAndZoom(new BMap.Point(118.075367, 24.44583), 15);maps.addControl(new BMap.ScaleControl());maps.addControl(new BMap.NavigationControl());
</script>
复制代码

主要是这里要注意(在回调过程中直接把直线画出来,不用再去获取两点间的坐标集合再去画线):

var pts = walking.getResults().getPlan(0).getRoute(0).getPath();
maps.addOverlay(new BMap.Polyline(pts, { strokeColor: "green", strokeWeight: 2, strokeOpacity: 1 }));

效果图如下：

 上面修改后的图片可以对文字跟气泡进行再处理效果如下：

主要修改JS代码如下：

复制代码 
                    $.each(abc, function (item, value) {var firstPoint = new BMap.Point(value.lan, value.yan);//var startIcon = new BMap.Icon("ic_map_location.png", new BMap.Size(45, 45));//var m1 = new BMap.Marker(firstPoint, { icon: startIcon, offset: new BMap.Size(-8, -15) });var m1 = new BMap.Marker(firstPoint);maps.addOverlay(m1);var lab1 = new BMap.Label(item + 1, { position: firstPoint, offset: new BMap.Size(-10, -25) });lab1.setStyle({color: "#fff",fontSize: "16px",backgroundColor: "0.05",border: "0",fontWeight: "bold"});maps.addOverlay(lab1);});
复制代码

 

编辑修改于2014-08-18

针对上面第二种是没有把线路坐标集合保存到数据库中,这样会出现每次页面加载都去百度那边进行获得坐标集合,针对这种情况进行修改,虽然FOR回调函数会出现错乱的问题,但这边可以加个标识让它显示出每一段集合是所属顺序,然后再进行合并出正确集合点;

复制代码 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title></title><script src="Scripts/jquery-1.8.2.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script><script type="text/javascript">$(function () {$("#btn_Show").click(function () {showMap();});});var chartData = [];function showMap() {var startSce = $("#<%=tb_Start.ClientID%>").val();var EndSce = $("#<%=tb_End.ClientID%>").val();var viaArray = $("#<%=tb_via.ClientID%>").val();$.ajax({type: "get",data: { startSce: startSce, viaArray: encodeURI(viaArray), EndSce: EndSce },datatype: "json",url: "Handler1.ashx",async: false,success: function (userInfo) {var abc = $.parseJSON(userInfo);$.each(abc, function (item, value) {chartData.push(new BMap.Point(value.lan, value.yan));})for (var i = 0; i < chartData.length - 1; i++) {var startPoint = chartData[i];var endPoint = chartData[i + 1];showPath(startPoint, endPoint,i);}}});}function showPath(startPoint, EndPoint,PointIndex) {var walking = new BMap.WalkingRoute(map, { renderOptions: { map: map, autoViewport: true } });walking.search(startPoint, EndPoint);walking.setSearchCompleteCallback(function (rs) {var pts = walking.getResults().getPlan(0).getRoute(0).getPath();var ptsJson = JSON.stringify(pts);$.ajax({type: "post",data: { SpointArray: ptsJson, PointIndex: PointIndex },datatype: "json",url: "Handler3.ashx",async: false,success: function (userInfo) {}});});}</script>
复制代码

Handler3代码如下:

复制代码 
using Newtonsoft.Json;
namespace WebApplication1
{/// <summary>/// Handler3 的摘要说明/// </summary>public class Handler3 : IHttpHandler{public void ProcessRequest(HttpContext context){string start = context.Request["SpointArray"];string PointIndex = context.Request["PointIndex"];List<ResultList> list = JsonConvert.DeserializeObject<List<ResultList>>(start);List<ResultList> newList = new List<ResultList>();foreach (var item in list){bool result = newList.Where(o => o.lng == item.lng && o.lat == item.lat).Count()== 0;if (result){newList.Add(item);}}FileText.WriteString(start + "|" + PointIndex);string newResult = "";foreach (var item in newList){//保存到数据库中,顺序标识也要保存起来PointIndexnewResult += "new ResultList(){lng=" + item.lng + ",lat=" + item.lat + "},";}FileText.WriteString("修改后的结节:" + newResult);context.Response.Write("Hello World");}public bool IsReusable{get{return false;}}}public class ResultList{public double lng { get; set; }public double lat { get; set; }}
}
复制代码

显示代码如下:

复制代码 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style><script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=nLpN5iKztxIWsPqgwsyrruUG"></script><title></title>
</head>
<body><div id="allmap"></div></body>
</html><script type="text/javascript">$(function () {abc();});function abc() {var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(118.10000, 24.46667), 15);var chartData = [];$.ajax({type: "get",datatype: "json",url: "Handler4.ashx",async: false,success: function (userInfo) {var abc = $.parseJSON(userInfo);$.each(abc, function (item, value) {chartData.push(new BMap.Point(value.lng, value.lat));})var polyline = new BMap.Polyline(chartData, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });map.addOverlay(polyline);},error: function (error) {}});}
</script>
复制代码

Handler4代码如下(要按标识顺序读出坐标点集合):

复制代码 
using Newtonsoft.Json;namespace WebApplication1
{/// <summary>/// Handler4 的摘要说明/// </summary>public class Handler4 : IHttpHandler{public void ProcessRequest(HttpContext context){List<ResultList> newList = new List<ResultList>(){//从数据库获得顺序集合new ResultList(){lng=118.07572,lat=24.456086},new ResultList(){lng=118.075747,lat=24.455756},new ResultList(){lng=118.075728,lat=24.455776},new ResultList(){lng=118.075698,lat=24.455776},new ResultList(){lng=118.075628,lat=24.455775},new ResultList(){lng=118.075419,lat=24.455712},new ResultList(){lng=118.075269,lat=24.455641},new ResultList(){lng=118.075388,lat=24.455422},new ResultList(){lng=118.075518,lat=24.455114},new ResultList(){lng=118.075528,lat=24.455094},new ResultList(){lng=118.075648,lat=24.454865},new ResultList(){lng=118.075768,lat=24.454656},new ResultList(){lng=118.075848,lat=24.454497},new ResultList(){lng=118.075858,lat=24.454427},new ResultList(){lng=118.075848,lat=24.454357},new ResultList(){lng=118.075818,lat=24.454226},new ResultList(){lng=118.075788,lat=24.454246},new ResultList(){lng=118.075768,lat=24.454256},new ResultList(){lng=118.075748,lat=24.454246},new ResultList(){lng=118.075728,lat=24.454225},new ResultList(){lng=118.075678,lat=24.454135},new ResultList(){lng=118.075579,lat=24.454054},new ResultList(){lng=118.075448,lat=24.453973},new ResultList(){lng=118.075438,lat=24.453943},new ResultList(){lng=118.075389,lat=24.453873},new ResultList(){lng=118.075319,lat=24.453791},new ResultList(){lng=118.075319,lat=24.453752},new ResultList(){lng=118.075289,lat=24.453632},new ResultList(){lng=118.07517,lat=24.453415},new ResultList(){lng=118.075022,lat=24.453437},new ResultList(){lng=118.075199,lat=24.45332},new ResultList(){lng=118.075179,lat=24.453221},new ResultList(){lng=118.075149,lat=24.45312},new ResultList(){lng=118.075149,lat=24.45288},new ResultList(){lng=118.075159,lat=24.45273},new ResultList(){lng=118.075199,lat=24.452601},new ResultList(){lng=118.075309,lat=24.452481},new ResultList(){lng=118.075419,lat=24.452373},new ResultList(){lng=118.075569,lat=24.452264},new ResultList(){lng=118.075608,lat=24.452235},new ResultList(){lng=118.075828,lat=24.452096},new ResultList(){lng=118.075908,lat=24.452068},new ResultList(){lng=118.076047,lat=24.452039},new ResultList(){lng=118.076157,lat=24.45204},new ResultList(){lng=118.076207,lat=24.451961},new ResultList(){lng=118.076287,lat=24.451821},new ResultList(){lng=118.076417,lat=24.451642},new ResultList(){lng=118.076487,lat=24.451543},new ResultList(){lng=118.076577,lat=24.451454},new ResultList(){lng=118.076607,lat=24.451425},new ResultList(){lng=118.076906,lat=24.451117},new ResultList(){lng=118.077026,lat=24.451008},new ResultList(){lng=118.077086,lat=24.450908},new ResultList(){lng=118.077205,lat=24.450769},new ResultList(){lng=118.077306,lat=24.450651},new ResultList(){lng=118.077496,lat=24.450472},new ResultList(){lng=118.077575,lat=24.450402},new ResultList(){lng=118.077615,lat=24.450353},new ResultList(){lng=118.077685,lat=24.450333},new ResultList(){lng=118.077695,lat=24.450263},new ResultList(){lng=118.077685,lat=24.450203},new ResultList(){lng=118.077665,lat=24.450104},new ResultList(){lng=118.077625,lat=24.450004},new ResultList(){lng=118.077615,lat=24.449953},new ResultList(){lng=118.077615,lat=24.449893},new ResultList(){lng=118.077636,lat=24.449843},new ResultList(){lng=118.077706,lat=24.449704},new ResultList(){lng=118.077716,lat=24.449654},new ResultList(){lng=118.077706,lat=24.449584},new ResultList(){lng=118.077623,lat=24.44948},new ResultList(){lng=118.077556,lat=24.449392},new ResultList(){lng=118.077456,lat=24.449292},new ResultList(){lng=118.077337,lat=24.449161},new ResultList(){lng=118.077306,lat=24.44912},new ResultList(){lng=118.077236,lat=24.44906},new ResultList(){lng=118.077057,lat=24.448918},new ResultList(){lng=118.077037,lat=24.448908},new ResultList(){lng=118.076977,lat=24.448868},new ResultList(){lng=118.076827,lat=24.448777},new ResultList(){lng=118.076698,lat=24.448685},new ResultList(){lng=118.076667,lat=24.448655},new ResultList(){lng=118.076558,lat=24.448614},new ResultList(){lng=118.076189,lat=24.448461},new ResultList(){lng=118.076049,lat=24.448419},new ResultList(){lng=118.075659,lat=24.448305},new ResultList(){lng=118.07537,lat=24.448073},new ResultList(){lng=118.075341,lat=24.448042},new ResultList(){lng=118.075111,lat=24.448369},new ResultList(){lng=118.075061,lat=24.448389},new ResultList(){lng=118.075031,lat=24.448389},new ResultList(){lng=118.074991,lat=24.448398},new ResultList(){lng=118.074971,lat=24.448429},new ResultList(){lng=118.074921,lat=24.448638},new ResultList(){lng=118.074911,lat=24.448657},new ResultList(){lng=118.074821,lat=24.448677},new ResultList(){lng=118.074802,lat=24.448676},new ResultList(){lng=118.074782,lat=24.448696},new ResultList(){lng=118.074771,lat=24.448717},new ResultList(){lng=118.074761,lat=24.448746},new ResultList(){lng=118.074761,lat=24.448786},new ResultList(){lng=118.07478,lat=24.448817},new ResultList(){lng=118.074652,lat=24.448695},new ResultList(){lng=118.074482,lat=24.448693},new ResultList(){lng=118.074462,lat=24.448703},new ResultList(){lng=118.074452,lat=24.448743},new ResultList(){lng=118.074422,lat=24.448763},new ResultList(){lng=118.074402,lat=24.448763},new ResultList(){lng=118.074342,lat=24.448762},new ResultList(){lng=118.074313,lat=24.448751},new ResultList(){lng=118.074282,lat=24.448721},new ResultList(){lng=118.074202,lat=24.44872},new ResultList(){lng=118.074133,lat=24.448729},new ResultList(){lng=118.074073,lat=24.448729},new ResultList(){lng=118.074033,lat=24.448738},new ResultList(){lng=118.073944,lat=24.448737},new ResultList(){lng=118.073893,lat=24.448747},new ResultList(){lng=118.073854,lat=24.448746},new ResultList(){lng=118.073823,lat=24.448776},new ResultList(){lng=118.073804,lat=24.448776},new ResultList(){lng=118.073784,lat=24.448755},new ResultList(){lng=118.073784,lat=24.448726},new ResultList(){lng=118.073784,lat=24.448695},new ResultList(){lng=118.073764,lat=24.448675},new ResultList(){lng=118.073743,lat=24.448665},new ResultList(){lng=118.073714,lat=24.448655},new ResultList(){lng=118.073684,lat=24.448634},new ResultList(){lng=118.073604,lat=24.448593},new ResultList(){lng=118.073574,lat=24.448583},new ResultList(){lng=118.073534,lat=24.448582},new ResultList(){lng=118.073494,lat=24.448602},new ResultList(){lng=118.073475,lat=24.448612},new ResultList(){lng=118.073434,lat=24.448611},new ResultList(){lng=118.073405,lat=24.448601},new ResultList(){lng=118.073375,lat=24.448591},new ResultList(){lng=118.073344,lat=24.44855},new ResultList(){lng=118.073344,lat=24.44851},new ResultList(){lng=118.073354,lat=24.44844},new ResultList(){lng=118.073344,lat=24.4484},new ResultList(){lng=118.073344,lat=24.44837},new ResultList(){lng=118.073295,lat=24.44836},new ResultList(){lng=118.073275,lat=24.448339},new ResultList(){lng=118.073275,lat=24.448319},new ResultList(){lng=118.073285,lat=24.44829},new ResultList(){lng=118.073275,lat=24.448259},new ResultList(){lng=118.073256,lat=24.448229},new ResultList(){lng=118.073235,lat=24.448199},new ResultList(){lng=118.073195,lat=24.448189},new ResultList(){lng=118.073155,lat=24.448198},new ResultList(){lng=118.073135,lat=24.448207},new ResultList(){lng=118.073086,lat=24.448227},new ResultList(){lng=118.073086,lat=24.448267},new ResultList(){lng=118.073096,lat=24.448307},new ResultList(){lng=118.073115,lat=24.448467},new ResultList(){lng=118.073106,lat=24.448487},new ResultList(){lng=118.073086,lat=24.448497},new ResultList(){lng=118.073055,lat=24.448507},new ResultList(){lng=118.072996,lat=24.448516},new ResultList(){lng=118.072986,lat=24.448536},new ResultList(){lng=118.072926,lat=24.448596},new ResultList(){lng=118.072876,lat=24.448624},new ResultList(){lng=118.072846,lat=24.448634},new ResultList(){lng=118.072816,lat=24.448634},new ResultList(){lng=118.072797,lat=24.448624},new ResultList(){lng=118.072766,lat=24.448564},new ResultList(){lng=118.072736,lat=24.448553},new ResultList(){lng=118.072697,lat=24.448563},new ResultList(){lng=118.072646,lat=24.448562},new ResultList(){lng=118.072567,lat=24.448621},new ResultList(){lng=118.072517,lat=24.44869},new ResultList(){lng=118.072586,lat=24.448701},new ResultList(){lng=118.072656,lat=24.448762},new ResultList(){lng=118.072706,lat=24.448842},new ResultList(){lng=118.072746,lat=24.448893},new ResultList(){lng=118.072766,lat=24.448874},new ResultList(){lng=118.072786,lat=24.448864},new ResultList(){lng=118.072816,lat=24.448874},new ResultList(){lng=118.072836,lat=24.448894},new ResultList(){lng=118.072866,lat=24.448915},new ResultList(){lng=118.072895,lat=24.448915},new ResultList(){lng=118.072965,lat=24.448846},new ResultList(){lng=118.073045,lat=24.448947},new ResultList(){lng=118.073195,lat=24.449068},new ResultList(){lng=118.073344,lat=24.449101},new ResultList(){lng=118.073344,lat=24.449101},new ResultList(){lng=118.073195,lat=24.449068},new ResultList(){lng=118.073045,lat=24.448947},new ResultList(){lng=118.072965,lat=24.448846},new ResultList(){lng=118.072895,lat=24.448915},new ResultList(){lng=118.072866,lat=24.448915},new ResultList(){lng=118.072836,lat=24.448894},new ResultList(){lng=118.072816,lat=24.448874},new ResultList(){lng=118.072786,lat=24.448864},new ResultList(){lng=118.072766,lat=24.448874},new ResultList(){lng=118.072746,lat=24.448893},new ResultList(){lng=118.072706,lat=24.448842},new ResultList(){lng=118.072656,lat=24.448762},new ResultList(){lng=118.072586,lat=24.448701},new ResultList(){lng=118.072517,lat=24.44869},new ResultList(){lng=118.072487,lat=24.448679},new ResultList(){lng=118.072447,lat=24.448689},new ResultList(){lng=118.072397,lat=24.448709},new ResultList(){lng=118.072347,lat=24.448668},new ResultList(){lng=118.072088,lat=24.448585},new ResultList(){lng=118.071978,lat=24.448554},new ResultList(){lng=118.071869,lat=24.448522},new ResultList(){lng=118.071808,lat=24.448511},new ResultList(){lng=118.071569,lat=24.448468},new ResultList(){lng=118.071569,lat=24.448468},new ResultList(){lng=118.071808,lat=24.448511},new ResultList(){lng=118.071869,lat=24.448522},new ResultList(){lng=118.071978,lat=24.448554},new ResultList(){lng=118.072088,lat=24.448585},new ResultList(){lng=118.072347,lat=24.448668},new ResultList(){lng=118.072487,lat=24.44848},new ResultList(){lng=118.072576,lat=24.448411},new ResultList(){lng=118.072646,lat=24.448352},new ResultList(){lng=118.072666,lat=24.448272},new ResultList(){lng=118.072677,lat=24.447962},new ResultList(){lng=118.072687,lat=24.447912},new ResultList(){lng=118.072777,lat=24.447763},new ResultList(){lng=118.072926,lat=24.447585},new ResultList(){lng=118.073046,lat=24.447487},new ResultList(){lng=118.073115,lat=24.447467},new ResultList(){lng=118.073136,lat=24.447318},new ResultList(){lng=118.073236,lat=24.447319},new ResultList(){lng=118.073326,lat=24.44729},new ResultList(){lng=118.073406,lat=24.447271},new ResultList(){lng=118.073465,lat=24.447232},new ResultList(){lng=118.073605,lat=24.447193},new ResultList(){lng=118.073674,lat=24.447164},new ResultList(){lng=118.073674,lat=24.447134},new ResultList(){lng=118.073695,lat=24.447084},new ResultList(){lng=118.073804,lat=24.446896},new ResultList(){lng=118.073855,lat=24.446806},new ResultList(){lng=118.073904,lat=24.446757},new ResultList(){lng=118.073974,lat=24.446728},new ResultList(){lng=118.074104,lat=24.446549},new ResultList(){lng=118.074183,lat=24.44624},new ResultList(){lng=118.074234,lat=24.44624},new ResultList(){lng=118.074343,lat=24.446232},new ResultList(){lng=118.074473,lat=24.446233},new ResultList(){lng=118.074603,lat=24.446215},new ResultList(){lng=118.074732,lat=24.446186},new ResultList(){lng=118.074872,lat=24.446147},new ResultList(){lng=118.074892,lat=24.446138},new ResultList(){lng=118.074972,lat=24.446109},new ResultList(){lng=118.075032,lat=24.446069},new ResultList(){lng=118.075112,lat=24.44601},new ResultList(){lng=118.075162,lat=24.44598},new ResultList(){lng=118.075222,lat=24.445971},new ResultList(){lng=118.075271,lat=24.445962},new ResultList(){lng=118.075341,lat=24.445952},new ResultList(){lng=118.075541,lat=24.445704},new ResultList(){lng=118.075541,lat=24.445684},new ResultList(){lng=118.075571,lat=24.445645},new ResultList(){lng=118.075601,lat=24.445615},new ResultList(){lng=118.075611,lat=24.445595},new ResultList(){lng=118.075601,lat=24.445565},new ResultList(){lng=118.075601,lat=24.445545},new ResultList(){lng=118.075671,lat=24.445475},new ResultList(){lng=118.075681,lat=24.445436},new ResultList(){lng=118.075721,lat=24.445366},new ResultList(){lng=118.075771,lat=24.445367},new ResultList(){lng=118.0758,lat=24.445347},new ResultList(){lng=118.075811,lat=24.445317},new ResultList(){lng=118.075841,lat=24.445318},new ResultList(){lng=118.075841,lat=24.445298},new ResultList(){lng=118.075851,lat=24.445277},new ResultList(){lng=118.075861,lat=24.445258},new ResultList(){lng=118.075871,lat=24.445238},new ResultList(){lng=118.075891,lat=24.445218},new ResultList(){lng=118.075911,lat=24.445218},new ResultList(){lng=118.075921,lat=24.445239},new ResultList(){lng=118.075931,lat=24.445278},new ResultList(){lng=118.07596,lat=24.445339},new ResultList(){lng=118.07597,lat=24.445378},new ResultList(){lng=118.07603,lat=24.44529},new ResultList(){lng=118.07606,lat=24.445259},new ResultList(){lng=118.076081,lat=24.44521},new ResultList(){lng=118.076081,lat=24.445179},new ResultList(){lng=118.076071,lat=24.44515},new ResultList(){lng=118.076071,lat=24.445119},new ResultList(){lng=118.076081,lat=24.44508},new ResultList(){lng=118.076091,lat=24.445049},new ResultList(){lng=118.0761,lat=24.44503},new ResultList(){lng=118.07612,lat=24.44501},new ResultList(){lng=118.07613,lat=24.444971},new ResultList(){lng=118.07613,lat=24.44493},new ResultList(){lng=118.07614,lat=24.44491},new ResultList(){lng=118.076161,lat=24.44491},new ResultList(){lng=118.07618,lat=24.44492},new ResultList(){lng=118.07627,lat=24.444922},new ResultList(){lng=118.0763,lat=24.444932},new ResultList(){lng=118.07632,lat=24.444952},new ResultList(){lng=118.076409,lat=24.444953},new ResultList(){lng=118.0764,lat=24.444923},new ResultList(){lng=118.0764,lat=24.444873},new ResultList(){lng=118.076409,lat=24.444853},new ResultList(){lng=118.07642,lat=24.444823},new ResultList(){lng=118.07643,lat=24.444803},new ResultList(){lng=118.07647,lat=24.444784},new ResultList(){lng=118.0765,lat=24.444774},new ResultList(){lng=118.07652,lat=24.444764},new ResultList(){lng=118.07656,lat=24.444735},new ResultList(){lng=118.07659,lat=24.444765},new ResultList(){lng=118.076659,lat=24.444785},new ResultList(){lng=118.076729,lat=24.444796},new ResultList(){lng=118.07677,lat=24.444796},new ResultList(){lng=118.076879,lat=24.444797},new ResultList(){lng=118.07686,lat=24.444687},new ResultList(){lng=118.076889,lat=24.444537},new ResultList(){lng=118.076899,lat=24.444508},new ResultList(){lng=118.076959,lat=24.444418},new ResultList(){lng=118.077508,lat=24.444262},new ResultList(){lng=118.077658,lat=24.444244},new ResultList(){lng=118.077828,lat=24.444216},new ResultList(){lng=118.077992,lat=24.444216},new ResultList(){lng=118.077992,lat=24.444216},new ResultList(){lng=118.078017,lat=24.444217},new ResultList(){lng=118.078187,lat=24.444258},new ResultList(){lng=118.078596,lat=24.444421},new ResultList(){lng=118.078806,lat=24.444483},new ResultList(){lng=118.078876,lat=24.444503},new ResultList(){lng=118.079724,lat=24.444669},new ResultList(){lng=118.079845,lat=24.44467},new ResultList(){lng=118.079974,lat=24.44468},new ResultList(){lng=118.080354,lat=24.444702},new ResultList(){lng=118.080483,lat=24.444724},new ResultList(){lng=118.080584,lat=24.444764},new ResultList(){lng=118.080684,lat=24.444835},new ResultList(){lng=118.080713,lat=24.444885},new ResultList(){lng=118.080764,lat=24.445005},new ResultList(){lng=118.080803,lat=24.445086},new ResultList(){lng=118.080823,lat=24.445185},new ResultList(){lng=118.080833,lat=24.445266},new ResultList(){lng=118.080843,lat=24.445295},new ResultList(){lng=118.080853,lat=24.445516},new ResultList(){lng=118.080862,lat=24.445615},new ResultList(){lng=118.080843,lat=24.445786},new ResultList(){lng=118.080823,lat=24.445895},new ResultList(){lng=118.080843,lat=24.445966},new ResultList(){lng=118.080882,lat=24.446026},new ResultList(){lng=118.081003,lat=24.446147},new ResultList(){lng=118.081092,lat=24.446237},new ResultList(){lng=118.081122,lat=24.446287},new ResultList(){lng=118.081192,lat=24.446347},new ResultList(){lng=118.081232,lat=24.446397},new ResultList(){lng=118.081272,lat=24.446438},new ResultList(){lng=118.081312,lat=24.446468},new ResultList(){lng=118.081382,lat=24.446518},new ResultList(){lng=118.081462,lat=24.446549},new ResultList(){lng=118.081282,lat=24.446628},new ResultList(){lng=118.081232,lat=24.446647},new ResultList(){lng=118.081222,lat=24.446667},new ResultList(){lng=118.081222,lat=24.446698},new ResultList(){lng=118.081222,lat=24.446727},new ResultList(){lng=118.081251,lat=24.446767},new ResultList(){lng=118.081352,lat=24.446898},new ResultList(){lng=118.081362,lat=24.447128},new ResultList(){lng=118.081382,lat=24.447138},new ResultList(){lng=118.081431,lat=24.447179},new ResultList(){lng=118.081532,lat=24.447269},new ResultList(){lng=118.081561,lat=24.447318},new ResultList(){lng=118.0819,lat=24.44855},new ResultList(){lng=118.08195,lat=24.448601},new ResultList(){lng=118.08199,lat=24.448651},new ResultList(){lng=118.08201,lat=24.44873},new ResultList(){lng=118.08202,lat=24.448811},new ResultList(){lng=118.08201,lat=24.448891},new ResultList(){lng=118.08195,lat=24.449221},new ResultList(){lng=118.08189,lat=24.44953},new ResultList(){lng=118.08184,lat=24.44985},new ResultList(){lng=118.0818,lat=24.45007},new ResultList(){lng=118.081764,lat=24.450196},new ResultList(){lng=118.081764,lat=24.450196},new ResultList(){lng=118.08169,lat=24.450459},new ResultList(){lng=118.08169,lat=24.45055},new ResultList(){lng=118.08168,lat=24.450589},new ResultList(){lng=118.08168,lat=24.450669},new ResultList(){lng=118.08168,lat=24.450889},new ResultList(){lng=118.08167,lat=24.451019},new ResultList(){lng=118.081659,lat=24.451059},new ResultList(){lng=118.081649,lat=24.451079},new ResultList(){lng=118.081639,lat=24.451099},new ResultList(){lng=118.08161,lat=24.451129},new ResultList(){lng=118.081579,lat=24.451159},new ResultList(){lng=118.08151,lat=24.451228},new ResultList(){lng=118.08133,lat=24.451368},new ResultList(){lng=118.08125,lat=24.451427},new ResultList(){lng=118.08117,lat=24.451497},new ResultList(){lng=118.08111,lat=24.451556},new ResultList(){lng=118.08107,lat=24.451576},new ResultList(){lng=118.08103,lat=24.451596},new ResultList(){lng=118.08099,lat=24.451615},new ResultList(){lng=118.080941,lat=24.451615},new ResultList(){lng=118.08088,lat=24.451595},new ResultList(){lng=118.08082,lat=24.451554},new ResultList(){lng=118.080711,lat=24.451464},new ResultList(){lng=118.08067,lat=24.451434},new ResultList(){lng=118.080611,lat=24.451393},new ResultList(){lng=118.080521,lat=24.451383},new ResultList(){lng=118.080451,lat=24.451413},new ResultList(){lng=118.080381,lat=24.451453},new ResultList(){lng=118.080321,lat=24.451522},new ResultList(){lng=118.080171,lat=24.451721},new ResultList(){lng=118.079792,lat=24.452339},new ResultList(){lng=118.079761,lat=24.452378},new ResultList(){lng=118.079722,lat=24.452418},new ResultList(){lng=118.079692,lat=24.452439}};string strSerializeJSON = JsonConvert.SerializeObject(newList);context.Response.Write(strSerializeJSON);}public bool IsReusable{get{return false;}}}
}
复制代码


效果图:

 

另：给标记点增加点击事件并弹窗（注要用到的openInfoWindow，其中enableMessage:false是把窗口上的小手机关闭）；

复制代码 
$.each(abc, function (item, value) {var firstPoint = new BMap.Point(value.lan, value.yan);//var startIcon = new BMap.Icon("ic_map_location.png", new BMap.Size(45, 45));//var m1 = new BMap.Marker(firstPoint, { icon: startIcon, offset: new BMap.Size(-8, -15) });var m1 = new BMap.Marker(firstPoint);var infoWindow = new BMap.InfoWindow("当前第"+(item+1)+"景点：厦门海底世界", { enableMessage: false, width: 30, height: 20 });m1.addEventListener("click", function (){this.openInfoWindow(infoWindow);});maps.addOverlay(m1);var lab1 = new BMap.Label(item + 1, { position: firstPoint, offset: new BMap.Size(-10, -25) });lab1.setStyle({color: "#fff",fontSize: "16px",backgroundColor: "0.05",border: "0",fontWeight: "bold"});maps.addOverlay(lab1);});
复制代码

 

 

编辑修改于2014-08-27

针对弹出提示窗在For里面要使用JS的闭包功能，否则会出现所有提示全部变成最后一个，代码如下：

复制代码 
 for (var i = 0; i < result.length; i++) {var firstPoint = new BMap.Point(result[i].PointLng, result[i].PointLat);var m1 = new BMap.Marker(firstPoint);var winfowText = "[途经点]:" + result[i].PointLable;var labText = result[i].PointOrder;if (result[i].PointType == "0" || result[i].PointType == "1") {if (result[0].PointLng == result[result.length - 1].PointLng && result[0].PointLat == result[result.length - 1].PointLat) {labText = "并";winfowText = "[起点|终点]:" + result[0].PointLable;}else {if (result[i].PointType == "0") {labText = "起";winfowText = "[起点]:" + result[i].PointLable;}else {labText = "终";winfowText = "[终点]:" + result[i].PointLable;}}}(function (x) {  var infoWindow = new BMap.InfoWindow(winfowText, { enableMessage: false, width: 30, height: 20 });m1.addEventListener("click", function () {this.openInfoWindow(infoWindow);});})(i);maps.addOverlay(m1);var lab1 = new BMap.Label(labText, { position: firstPoint, offset: new BMap.Size(-10, -25) });lab1.setStyle({color: "#fff",fontSize: "16px",backgroundColor: "0.05",border: "0",fontWeight: "bold"});maps.addOverlay(lab1);}

转载于:https://www.cnblogs.com/milkytea/p/6723494.html

这篇关于百度地图之多点步行路径连线问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/194912。

相关文章

百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
好题——hdu2522（小数问题：求1/n的第一个循环节）

好题——hdu2522（小数问题：求1/n的第一个循环节）

好喜欢这题，第一次做小数问题，一开始真心没思路，然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数，不能写作两整数之比*****************************（一开始没想到，小学没学好） 此题1/n肯定是一个有限循环小数，了解这些后就能做此题了。 按照除法的机制，用一个函数表示出来就可以了，代码如下
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
hdu2544（单源最短路径）

hdu2544（单源最短路径）

模板题： //题意：求1到n的最短路径，模板题#include<iostream>#include<algorithm>#include<cstring>#include<stack>#include<queue>#include<set>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#i
阅读更多...
购买磨轮平衡机时应该注意什么问题和技巧

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时，您应该注意以下几个关键点： 平衡精度 平衡精度是衡量平衡机性能的核心指标，直接影响到不平衡量的检测与校准的准确性，从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声，提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮，适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监
阅读更多...
缓存雪崩问题

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库，瞬间耗尽数据库资源，导致数据库无法使用。 解决方案： 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内，大量缓存数据同时失效，导致所有请求直接涌向数据库，瞬间增加数据库的负载压力，可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k
阅读更多...
poj 1734 （floyd求最小环并打印路径）

poj 1734 （floyd求最小环并打印路径）

题意： 求图中的一个最小环，并打印路径。 解析： ans 保存最小环长度。 一直wa，最后终于找到原因，inf开太大爆掉了。。。 虽然0x3f3f3f3f用memset好用，但是还是有局限性。 代码： #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#incl
阅读更多...
6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

6.1.数据结构-c/c++堆详解下篇（堆排序，TopK问题）

上篇：6.1.数据结构-c/c++模拟实现堆上篇（向下，上调整算法，建堆，增删数据）-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小)： 2.2 C语言代码（手写堆） 2.3 C++代码（使用优先级队列 priority_queue）
阅读更多...
poj 1981 单位圆套最多点

poj 1981 单位圆套最多点

题意： 给n（300）个点，用单位圆去套他们，问最多能套多少个点。 解析： 点击打开链接 直接当作单位圆套最多点的模板吧，用极脚来排序。 代码： #pragma comment(linker, "/STACK:1677721600")#include <map>#include <set>#include <cmath>#include <queue>
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2