github地址

https://github.com/a1115040996/MyHTML/tree/gh-pages/BDMap

　　

源代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

	<link rel="stylesheet" type="text/css" href="css/index.css"/>

</head>

<body>

  <!--百度地图容器-->

  <div style="width:99.9%;height:600px;border:#ccc solid 1px;" id="dituContent"></div>

  <div id="location">

  	坐标点

  	<div id="location-list">

  		<dl class="point1">

  			<dt>纵坐标:<span class="xp">116.301934</span></dt>

  			<dd>横坐标:<span class="yp">39.977552</span></dd>

  		</dl>

  	</div>

  	<div id="ipt-location">

  		<dl>

  			<dt style="width: 100%;text-align: center;">输入公交线路名称：<input type="text" name="" id="busName" value="52路" /></dt>

  		</dl>

  	</div>

  </div>

  <div id="btn">

  	点击我生成路线

  </div>

</body>

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=UAumsTfvpKBlNPUd9e5PvAEnR0YGNllO&v=2.0&services=true"></script>

<script type="text/javascript">

    //创建和初始化地图函数：

    function initMap(){

        createMap();//创建地图

        setMapEvent();//设置地图事件

        addMapControl();//向地图添加控件

    }

    //创建地图函数：

    function createMap(){

        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图

        var point = new BMap.Point(116.301934,39.977552);//定义一个中心点坐标

        map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中

        window.map = map;//将map变量存储在全局

    }

    //地图事件设置函数：

    function setMapEvent(){

        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)

        map.enableScrollWheelZoom();//启用地图滚轮放大缩小

        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)

        map.enableKeyboard();//启用键盘上下左右键移动地图

    }

    //地图控件添加函数：

    function addMapControl(){

        //向地图中添加缩放控件

	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});

	map.addControl(ctrl_nav);

        //向地图中添加缩略图控件

	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});

	map.addControl(ctrl_ove);

        //向地图中添加比例尺控件

	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});

	map.addControl(ctrl_sca);

    }

    initMap();//创建和初始化地图

    $('#btn').on('click', function () {

        var busLineSearch = new BMap.BusLineSearch('上海', {

		    renderOptions:{map:map, panel:"results"}, // 将查询到的地图线路信息 绘制到视图上

	        onGetBusListComplete: function(result){

	           if(result) {

	            var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上

				busLineSearch.getBusLine(fstLine)

	           }

	        },

	        onGetBusLineComplete: function(result){

				console.log('get result====>', result['Ti']['ia']); // 获取当前查询的公交线路所有的经纬度点的信息

	        }

		});

		busLineSearch.getBusList(document.getElementById('busName').value);

    });

</script>

</html>

　　

百度地图公交线路查询，并绘制到地图上并获取所有路径经纬度点(可供echarts 路径图使用)的更多相关文章

  1. AMap公交线路查询

    <!doctype html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. 【Android】3.14 公交线路查询功能

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 一.简介 利用BusLineSearch方法可查询公交线路的详情信息. 二.运行截图 简介:介绍查询公交线路功 ...

  3. 【百度地图API】如何制作公交线路的搜索？如331路

    原文:[百度地图API]如何制作公交线路的搜索?如331路 摘要: 从A点到B点的公交导航大家都知道怎么做了,那么单独查询331路公交车的公交路线,如何制作呢?我们一起来学习一下~ --------- ...

  4. Android百度地图开发（五）公交线路详情搜索、多条线路显示

    一.公交线路详情检索 获取公交线路的详情主要分来两步,1.获取公交线路的Uid,2.通过Uid获取公交线路详情. 1.获取公交线路的Uid: /* * 获得公交线路图的Uid,并且根据系Uid发起公交 ...

  5. echarts地图 绘制部分上海市公交线路数据

    源代码地址 https://github.com/a1115040996/MyHTML/blob/gh-pages/echarts/roadMap.html 预览地址 https://a1115040 ...

  6. 利用百度API（JavaScript 版）实现在地图上绘制任一多边形，并判断给定经纬度是否在多边形范围内。以及两点间的测距功能

    权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...

  7. [LeetCode] Bus Routes 公交线路

    We have a list of bus routes. Each routes[i] is a bus route that the i-th bus repeats forever. For e ...

  8. R绘制中国地图，并展示流行病学数据

    流行病学的数据讲究“三间分布”,即人群分布.时间分布和空间分布.其中的“空间分布”最好是在地图上展示,才比较清楚.R软件集统计分析与高级绘图于大成,是最适合做这项工作了.关于地图的绘制过程,谢益辉.邱 ...

  9. 公交线路免费api接口代码

    描写叙述:本接口主要是依据城市名称 +  线路名称 模糊查找城市公交线路信息. 开源api接口:http://openapi.aibang.com/bus/lines?app_key=keyvalue ...

随机推荐

  1. 【树状数组】【P3372】 【模板】线段树 1

    Description 给定一个长度为 \(n\) 的序列,有 \(m\) 次操作,要求支持区间加和区间求和. Limitation \(1 \leq n,~m \leq 10^5\) 序列元素值域始 ...

  2. 第08组 Beta冲刺（4/5）

    队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ? 测试新功能中 展示GitHub当日代码/文档签入记录 接下来的计划 ...

  3. Gamma阶段第九次scrum meeting

    每日任务内容 队员 昨日完成任务 明日要完成的任务 张圆宁 #91 用户体验与优化https://github.com/rRetr0Git/rateMyCourse/issues/91(持续完成) # ...

  4. Asp.Net Core 2.x 和 3.x WebAPI 使用 Swagger 时 API Controller 控制器 Action 方法 隐藏 hidden 与 and 分组 group

    1.前言 为什么我们要隐藏部分接口? 因为我们在用swagger代替接口的时候,难免有些接口会直观的暴露出来,比如我们结合Consul一起使用的时候,会将健康检查接口以及报警通知接口暴露出来,这些接口 ...

  5. linux_权限小练习

    下面是解释: 当前# root用户, ls列出列表 mkdir 新建目录 赋予目录744权限      对others来说是  r--  只可读 touch 新建在目录下的同名文件 赋予文件600权限 ...

  6. SQL告警

    SQL很有必要   MySQL性能 最大数据量 最大并发数 查询耗时0.5秒 实施原则 数据表设计 数据类型 避免空值 text类型 索引优化 索引分类 优化原则 SQL优化 分批处理 不做列运算 避 ...

  7. Maven使用tomcat7-maven-plugin

    原文地址:https://www.cnblogs.com/mozisss/p/10233366.html 功能: (使用maven中的tomcat插件,就可以将tomcat集成到项目中,效果就是:在不 ...

  8. 030 ElasticSearch----全文检索技术05---基础知识详解03-聚合

    聚合可以让我们极其方便的实现对数据的统计.分析.例如: 什么品牌的手机最受欢迎? 这些手机的平均价格.最高价格.最低价格? 这些手机每月的销售情况如何? 实现这些统计功能的比数据库的sql要方便的多, ...

  9. [转帖]linux find -regex 使用正则表达式

    linux find -regex 使用正则表达式 https://www.cnblogs.com/jiangzhaowei/p/5451173.html find之强大毋庸置疑,此处只是带领大家一窥 ...

  10. eDiary

    多年过去,您经历了BBS.论坛.博客.推特.微博 ...,但在电脑的某个 角落,eDiary始终为你守护发自你内心的声音. eDiary的作用不仅仅在于写日记,您也可以用它来记流水帐.写工作日志, 记 ...