百度地图-实时路况调用实现

效果图

js代码

$(function(){// 百度地图API功能var map = new BMap.Map("allmap");var point = new BMap.Point(116.402100, 39.999575);map.centerAndZoom(point, 12);map.enableScrollWheelZoom();var content = '<div style="margin:0;line-height:20px;padding:2px;">' +'<img src="/assets/img/convenience/niaocao.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +'地址：安定路甲3号(北京奥林匹克公园内,亚运村北)<br/>电话：010-84373008<br>标签：运动健身 体育场馆' + '</div>';//会跳动的标注var marker = new BMap.Marker(point);  // 创建标注map.addOverlay(marker);               // 将标注添加到地图中marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画//单个检索var local = new BMap.LocalSearch(map, {renderOptions:{map: map,autoViewport: false,    //自动搜索视野selectFirstResult: false //是否指定第一个目标}});local.search("医院");//创建检索信息窗口对象var searchInfoWindow3 = new BMapLib.SearchInfoWindow(map, content, {title  : "国家体育场(鸟巢)",  //标题width  : 290,             //宽度height : 100,             //高度panel  : "panel",         //检索结果面板enableAutoPan : true,     //自动平移searchTypes   :[BMAPLIB_TAB_SEARCH,   //周边检索BMAPLIB_TAB_TO_HERE,  //到这里去BMAPLIB_TAB_FROM_HERE //从这里出发]});marker.enableDragging(); //marker可拖拽marker.addEventListener("click", function(){searchInfoWindow3.open(point); //开启信息窗口});
});

css代码

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

body代码

<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<script type="text/javascript" charset="utf-8" src="<%=basePath %>js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8Ydw4v3ZSG8hcMdv3RZjVLuG"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>

<body><div id="allmap"></div>
</body>

百度地图-实时路况调用实现相关推荐

百度地图实时路况数据爬取
最近为了参加"华为杯"数学建模的国赛,学校组织了一次校内选拔,题目要求收集不同时段的交通方面数据,建立评价体系,并对整体交通划线效果给出相应评价,看到题目我就方了,这个交通数据怎么 ...
百度地图实时路况数据-拥堵的生存分析
一.Request爬取数据 1.获取AK 进入[百度地图开放平台]→注册认证成为开发者→[应用管理]→[我的应用]→[创建应用]→获得AK 2.爬虫代码 import requests import ...
高德地图实时路况数据-拥堵持续时长预测
一.Request爬取数据 1.获取AK 进入[高德地图开放平台]→注册认证成为开发者→[应用管理]→[我的应用]→[创建新应用]→获得AK 2.所需爬取数据研究所需数据主要由两部分构成, ①高德地 ...
WPF技术触屏上的应用系列（二）: 嵌入百度地图、API调用及结合本地数据库在地图上进行自定义标点的实现...
原文:WPF技术触屏上的应用系列(二): 嵌入百度地图.API调用及结合本地数据库在地图上进行自定义标点的实现去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7操作系 ...
12.5 地图实时路况数据分析
运行之前:启动zookeeper,kafka,redis 注意jar兼容:代码:Traffic.zip 地图实时路况: 可以使用Java代码来当kafka生产者 def main(args: Arra ...
百度地图实时监听缩放级别
百度地图实时监听缩放级别 map.addEventListener("zoomend", function(e){let zoom= map.getZoom(); // 获取缩放级 ...
百度地图开发：调用jsAPI实现实时定位的解决方案及常见问题
项目说明建议使用异步加载,避免F12控制台出现阻塞等提示: 电脑使用浏览器定位时,由于没有GPS,会出现无法定位(fail8)等错误提示,属于正常: 手机端时候,尤其是华为系列(安卓系统)无法正常定 ...
百度地图API快速调用，一键生成百度地图
对于在网站或者网页之内插入百度地图插件,可能很多编程技术人员都知道如何来做,但是做起来所花费的时间都比较长,那么下面跟大家分享一下如何快速调用百度地图API,一件生成百度地图的方法,这种方法适用于任何 ...
baidumap vue 判断范围_vue中百度地图API的调用
export default { name: 'HelloWorld', data() { return { mapArr: { lat: 0, lng: 0, }, } }, props: ['ip ...

百度地图-实时路况调用实现

百度地图-实时路况调用实现相关推荐

最新文章

热门文章