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. 剑指offer 6：链表（从头到尾打印链表）

    链表的数据结构 struct ListNode { int value; ListNode* next; }; 那么在链表的末尾添加一个节点的代码如下: void insert(ListNode** ...

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

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

  3. shell 字符串拼接

    #!/bin/bash name="Shell" url="http://c.biancheng.net/shell/" str1=$name$url #中间不 ...

  4. zabbix解决监控图形中文乱码

    原文: https://blog.csdn.net/xujiamin0022016/article/details/86541783 zabbix 4解决监控图形中文乱码首先在windows里找到你想 ...

  5. Windows10 下 JAVA JDK版本设置修改操作

    一般情况下,先修改系统环境变量,右键点击桌面上的“此电脑”图标中,选择“属性”,在弹出的属性窗口中选择“高级系统设置”,然后点击“环境变量”     在弹出窗口中的“系统变量”,查到“JAVA_HOM ...

  6. sonarqube使用maven进行代码分析

    修改setting.xml文件,增加并激活profile <profile> <id>sonar</id> <properties> <sonar ...

  7. ASP.NET Core消息队列RabbitMQ基础入门实战演练

    一.课程介绍 人生苦短,我用.NET Core!消息队列RabbitMQ大家相比都不陌生,本次分享课程阿笨将给大家分享一下在一般项目中99%都会用到的消息队列MQ的一个实战业务运用场景.本次分享课程不 ...

  8. 测试效率加倍提升！shell 高阶命令快来 get 下！

    背景 目前大部分的项目都是部署在Linux系统上,作为测试,掌握常用Linux命令是必须的技能.很多的工作了好几年的测试人员可能还只会简单的ls.cd.cat等等这些命令,这些命令是可以应付工作的大部 ...

  9. Linux之三剑客

    LINUX之三剑客 本篇主要介绍linux下常用的增删改查工具: grep sed awk grep是linux下一个强大的搜索工具,几乎操作linux的用户每天都会或多或少的用到grep命令,单一个 ...

  10. linux系统命令别名，打造属于自己的个性linux系统

    linux操作系统,个性化快捷命令,让你的系统更懂你,让你的操作更快捷. 在你使用linux操作系统的时候,有时候输入命令过长的话会显得很麻烦,这个时候,linux操作系统支持的命令别名很大程度上解决 ...