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

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

如果你对百度地图的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>

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>

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

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

时间: 2024-10-14 22:03:15

百度地图之多点步行路径连线问题的相关文章

ios添加百度地图方法

Hello BaiduMapiOS SDK 引入头文件 引入静态库文件 引入系统framework 引入mapapi.bundle资源文件 初始化BMKMapManager 创建BMKMapView 引入头文件 首先将百度MapAPI提供的头文件和静态库(.a)文件拷贝到您的工程目录下,在Xcode中添加新的文件Group,引入百度MapAPI提供的头文件(请使用Xcode 4.X以上平台). 在您需要使用百度MapAPI的文件中添加以下代码 #import "BMapKit.h" 引

百度地图Canvas实现十万CAD数据秒级加载

背景 前段时间工作室接到一个与地图相关的项目,我作为项目组成员主要负责地图方面的设计和开发.由于地图部分主要涉及的是前端页面的显示,作为一名Java后端的小白,第一次写了这么多HTML和JavaScript. 项目大概是需要将一张CAD的图(导出大概三十万条数据)叠加在地图上,在接Canvas之前考虑了很多种方案,最后都否定了.首先我们想利用百度地图原生的JavaScript API实现线和点的加载,但是经过测试,当数据达到2000左右,加载时间就已经达到了数十秒,后来直接测试了一万条数据,浏览

百度地图多点路径加载以及调整页面js

1 $(document).ready(function () { 2 /*用正则表达式获取url传递的地址参数,split后获得地址数组*/ 3 bmap = new BMap.Map('mapcontainer'); 4 var point = new BMap.Point(116.404, 39.915);//地图中心点 5 bmap.centerAndZoom(point, 15);//调整缩放以及设立中心点 6 bmap.enableScrollWheelZoom(); 7 var l

iOS百度地图路径规划和POI检索详细总结-b

路径规划.png 百度地图的使用 百度地图API的导入网上说了许多坑,不过我遇到的比较少,这里就放两个比较常见的吧.坑一: 奥联WIFI_xcodeproj.png 如上图所示,在infoplist里加入这个字段,而且这里还可以设置提示的内容.不加的话,嘿嘿嘿,期待你的尝试.坑二:如下图 Pasted_Graphic_jpg.png 导入百度地图API运行之后报上图错误大约18到20个左右,解决方法添加libstdc++.6.0.9 的库.填完坑之后看一下我们今天要演示的效果吧. 路线规划图.g

ios百度地图-路径规划

百度地图的路径规划功能, 在使用百度路径的时候,出现了一些小问题,在此,分享一下自己的最简单的一个路径小demo 当然,前面的百度配置问题,我就不和大家讲了,因为这方面的资料太多了!现在,我来介绍一下这个小demo AppDelegate.m文件如下, #import "AppDelegate.h" import "rootViewController.h" @implementation AppDelegate (BOOL)application:(UIAppli

android百度地图开发之自动定位所在位置与固定位置进行驾车,步行,公交路线搜索

最近跟着百度地图API学地图开发,先是学了路径搜索,对于已知坐标的两点进行驾车.公交.步行三种路径的搜索(公交路径运行没效果,待学习中),后来又 学了定位功能,能够获取到自己所在位置的经纬度,但当将两者合起来先自动获取自己所在位置的经纬度然后与固定地点进行路径搜索时却弄不出来了,因为刚开始 写的两者在两个类中总是取不到经纬度值,后来将两者写到同一个类中去了,终于取到经纬度值了,也运行出来了.需要 在 BDLocationListener的onReceiveLocation里获取到经纬度值,因为已

JS调用百度地图拼接成路径,C#保存地图图片到本地

昨日公司要求做一个静态百度地图图片生成到本地的功能,以前没做过,这次小小总结一下 百度地图API自己看(http://developer.baidu.com/map/index.php?title=static) 当然首先得调用百度地图API,无非就是前台后台,,我是用JS写的,(http://www.cnblogs.com/kulong995/p/3368048.html)这个人写的不错,是用c#写的调用百度地图,写的很不错,可以看看 百度地图是由一堆乱七八糟的数据拼接出来的路径,然而保存图片

Android 百度地图 SDK v3_3_0 (六) ---驾车、步行、公交路线搜索

目前百度地图SDK所集成的检索服务包括:POI检索.公交信息查询.线路规划.地理编码.在线建议查询.短串分享. 上篇博客讲解了POI检索和在线建议查询,这篇博客将讲解经常用到的线路规划. 在讲解代码之前先上张效果图: 好了!现在我们上代码,来实现上面的功能(代码中都做了相应的注解) 路线规划检索有三种检索:驾车,步行,公交车!三种实现的步骤基本类似,下面我们就拿一种来做解析(公交车). 1.首先我们要实例化路线规划检索的实例 // 初始化搜索模块,注册事件监听 mSearch = RoutePl

使用百度地图JavaScript实现驾车/公交/步行导航功能

1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 5 <style type="text/