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. contest4 CF1091 div2 ooooxx ooooxx ooooox

    题意 div2E 一个有\(n+1\)个点的无向图, 给出\(n\)个点的度数, 求出每一种可能的\(n+1\)的度数 (题面附带公式 graph realization problem)

  2. 回溯法 | 图的m着色问题

    学习链接:算法 图的M着色问题 虽然今早9点才醒来,10点才来教室,但是coding得很高效.吃个早餐,拉个粑粑的时间,就把算法书上的[图的m着色]问题看明白了,大脑里也形成了解决问题的框架. 其实这 ...

  3. CSS3中box-sizing属性的作用以及应用场景

    盒模型box-sizing: 取值 1.content-box 默认值,标准盒模型,设置宽度为内容宽度,实际宽度为左右边距加上左右边框加上左右填充再加上内容宽度 2.border-box 设置宽度等于 ...

  4. 第10组 Beta冲刺（4/4）

    队名:凹凸曼 组长博客 作业博客 组员实践情况 童景霖 过去两天完成了哪些任务 文字/口头描述 继续学习Android studio和Java 制作剩余界面前端 展示GitHub当日代码/文档签入记录 ...

  5. MHA+keepalived集群环境搭建

    整个MHA+keepalived集群环境搭建 1.1. 环境简介1.1.1.vmvare虚拟机,系统版本CentOS6.5 x86_64位最小化安装,mysql的版本5.7.21,1.1.2.虚拟机器 ...

  6. leetcode 947. 移除最多的同行或同列的石头

    题目描述: 在二维平面上,我们将石头放置在一些整数坐标点上.每个坐标点上最多只能有一块石头. 现在,move 操作将会移除与网格上的某一块石头共享一列或一行的一块石头. 我们最多能执行多少次 move ...

  7. 【RabbitMQ学习之一】RabbitMQ入门

    环境 win7 rabbitmq-server-3.7.17 Erlang 22.1 RabbitMQ使用Erlang语言开发消息中间件.RabbitMQ基于AMQP(高级消息队列协议)协议,更适合业 ...

  8. maven 向私服部署jar

    1.有源码的情况下 首先需要在要deploy的项目pom中添加私服地址 <distributionManagement> <repository> <id>nexu ...

  9. ArcSOC进程数不断增长导致oracle processes溢出原因分析

    现场出现了一个问题,oracle运行一段时间之后,process个数会溢出,然后新的连接会失败.通过分析,发现Arcgis Server 的ArcSOC进程在不段增长.ArcSOC是arcgis se ...

  10. linux shell提示输入 输错字符解决方法

    linux shell提示输入 输错字符解决方法ctrl+回车 删除单个字符ctrl+u删除光标前全部字符ctrl+k删除光标后全部字符