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. Java 并发系列之二：java 并发机制的底层实现原理

    1. 处理器实现原子操作 2. volatile /** 补充: 主要作用:内存可见性,是变量在多个线程中可见,修饰变量,解决一写多读的问题. 轻量级的synchronized,不会造成阻塞.性能比s ...

  2. linux 自动化安装系统 -KS文件

    # Kickstart file automatically generated by anaconda. installharddrive --partition=sdb2 --dir=lang e ...

  3. Java小学四则运算

    本次作业要求来自:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE1/homework/2166 github远程仓库的地址:https://github.c ...

  4. 【神经网络与深度学习】chainer边运行边定义的方法使构建深度学习网络变的灵活简单

    Chainer是一个专门为高效研究和开发深度学习算法而设计的开源框架. 这篇博文会通过一些例子简要地介绍一下Chainer,同时把它与其他一些框架做比较,比如Caffe.Theano.Torch和Te ...

  5. Maven 教程（4）— 新建Maven项目

    原文地址:https://blog.csdn.net/liupeifeng3514/article/details/79542203 我们以简单的helloworld来作为入门的实例,有些人说掌握了h ...

  6. 最小生成树 --- 求最小权值、MST

    Agri-Net Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 37109   Accepted: 14982 Descri ...

  7. 低版本的 eclipse 不支持 tomcat8.5 的解决方法

    目录 低版本的eclipse 不支持 tomcat8.5,但是还想使用的方法 低版本的eclipse 不支持 tomcat8.5,但是还想使用的方法 1. 介绍:   我在使用 mars 版本的 ec ...

  8. shell-快速入门_批处理脚本编程语言

    1. Shell概述 1.1. Shell是什么 Shell是一门批处理脚本编程语言. 批处理是什么? 操作系统都分为(GUI)图形界面,命令界面(command). 命令操作的可以不用一一条执行.可 ...

  9. javaScript 对象的hasOwnProperty方法打印window自定义属性

    for (var name in window) { if (window.hasOwnProperty(name)) { window.console.log ( name + " : & ...

  10. 第三章 Maven构建 Java Spring Boot Web项目

    3.1   认识Srping Boot Spring Boot是一个框架,是一种全新的编程规范,它的产生简化了对框架的使用,简化了Spring众多的框架中大量的繁琐的配置文件,所以说Spring Bo ...