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

时间：2014-08-07 18:10:20 阅读：285 评论：0 收藏：0 [点我收藏+]

最近项目需要结合用到百度地图,需求是在地图实现多个点步行连线问题;因为百度有提供两点之间的步行路径图,以及沿线的坐标点信息;初步设想是首先把各个点的步行路径画出来,然后得到这条线路的坐标信息集合,然后通过百度地图的另外一个做直线接口重新把完整线路绘画出来;

如果你对百度地图的API知识不是很了解,可以查看http://developer.51cto.com/art/201110/298662.htm,里面有比较详细的介绍;

百度地图API开发者地址:http://developer.baidu.com/map/jshome.htm

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

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>

bubuko.com,布布扣

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>

bubuko.com,布布扣

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

<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>

bubuko.com,布布扣

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

百度地图之多点步行路径连线问题,布布扣,bubuko.com

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

标签：style blog http color java 使用 os io

原文地址：http://www.cnblogs.com/wujy/p/3897501.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行