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. Django+uWSGI+Nginx 部署网站

    Django 1.11设置 保证Django在本地调试没有问题: 当然这是前提^_^ 收集静态文件至指定文件夹 Django静态文件设置具体参考:https://docs.djangoproject. ...

  2. SDOI 2019 R2 摸鱼记

    其实并没有什么动力来写这篇游记,毕竟呢,明明已经做好了被吊打的心理准备,可是当 Day 2 挂到没分时,当看到自己在高一里还排名二十时,还是有些,有些难言的滋味.学长们该走的真的都走了,就要只剩下 z ...

  3. hdu 6620 Just an Old Puzzle（N数码问题）

    http://acm.hdu.edu.cn/showproblem.php?pid=6620 N数码问题: n*n矩阵,里面填着1—n*n-1,还有1个空格, 通过上下左右移动空格的位置, 使矩阵里的 ...

  4. Google Spreadsheet Add-on Links Extractor 谷歌表格插件链接提取器的制作与发布（附源码）

    引言 为什么想到制作这么一个插件呢,是因为博主在更新微信公众号[刷尽天下]的后台数据库时,需要有博客园题目帖子的链接,那么就要从这篇帖子 LeetCode All in One 题目讲解汇总(持续更新 ...

  5. vue+element 表格筛选

      筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...

  6. java基础 JDBC & Statement & PreparedStatement

    参考文章: http://blog.csdn.net/wang379275614/article/details/23393335 概念 JDBC-数据库连接,是由一些类和接口构成的API,是J2SE ...

  7. 关于 Keras 模型

    在 Keras 中有两类主要的模型:Sequential 顺序模型 和 使用函数式 API 的 Model 类模型. 1.Sequential 顺序模型 ====>>开始使用 Keras ...

  8. linux部署go

    一.下载tar包并解压 yum -y install wget glibc.i686 #后面一个是依赖包,不安装会报错: /lib/ld-linux.so.2: bad ELF interpreter ...

  9. Rancher 构建 CI/CD 自动化流程 - 动态配置 Jenkins-slave（一）

    一.说明 1)需求: Rancher 上部署 Jenkins-master,服务采用 Jenkins-slave 发布,发布完成后 Jenkins-slave 自动销毁. 2)环境: Rancher ...

  10. [原创]K8Cscan插件之Host2IP(批量域名解析/主机名转IP)

    0x001 前言 在内网渗透中,有时候通过域或日志导出一些机器名,或者管理员备分文件等方式获取 只有主机名或者域名时,就需要先解析出IP获取相关IP或IP段,才好进行下一步扫描. 0x002 用法 首 ...