关键词:
百度地图API, 文档不全,例子不细致。 在网上还没有太多有用的例子。比如说下面几个需求的解决方案就找不到:
1. 如何用百度地图API查询一个地点的经纬度。
2. 如何用百度地图通过一个经纬度查询商圈和地址。
3.点击百度地图时, 获得点击位置的经纬度。
4. 如果按照时间轴动态显示热力图的变化。
我昨天玩了一下午百度地图javascript API,解决了上面的几个问题,顺道用少量打车用户的抽样数据做一个数据可视化, 给大家提供一个可以参考的例子
首先数据是来自北京市某个周日的出行数据, 其中包含出发地点和到达地点的经纬度。
{"passenger_phone":"XXX","start_location_lng":"116.31414794922","start_location_lat":"40.080762261285","end_location_lng":"116.3363","end_location_lat":"40.07079"}
{"passenger_phone":"XXX","start_location_lng":"116.734490","start_location_lat":"39.903438","end_location_lng":"116.735160","end_location_lat":"39.962470"}
由于数据是从spark里查询出来放在hadoop上,是map后的一个结果, 因此每条数据的间隔符号是换行。这导致我必须在js里把数据文件命名为txt文件, 并且在js里做一些特殊处理。
百度地图API, 因为需要频繁在js里根据鼠标点击获得地理位置和商圈信息, 因此在html创建了一个不可见的container用来加载地图查询模块
<div id="dummy" style ="display:none"></div>
用来加载百度地图javascript model用来查询地理信息。
var bmap4search= new BMap.Map("dummy");
var localSearch = new BMap.LocalSearch(bmap4search);
由于需要找出鼠标点击位置五公里范围内的人数, 因此需要一个计算地理距离的函数。
function rad(d)
{
return d * Math.PI / 180.0;
}
function getDistance(lng1,lat1, lng2,lat2)
{
radLat1 = rad(lat1);
radLat2 = rad(lat2);
a = radLat1 - radLat2;
b = rad(lng1) - rad(lng2);
s=2*Math.asin(
Math.sqrt(Math.pow(Math.sin(a/2), 2.0)+
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2), 2.0)));
EARTH_RADIUS = 6378.137;
s = s * EARTH_RADIUS;
s = Math.round(s*10000) / 10000;
return s;
}
页面加载后, 首先显示用户出发热力图, 看上去回龙观还真像是北京的宇宙中心, 出行用户最密集。
用鼠标点击地图上的某一个点, 可以获得该点的地址信息。参考下一张图。
用鼠标点击回龙观位置, 动态获得一个坐标后, 按钮“点击显示5公里内......”亮了。 点击按钮可以查看这些回龙观的用户, 周日出行目的地是哪里。结果发现回龙观的群众周末大多数也只在回龙观附近晃荡。
至于播放时间轴热力图变化的问题, 其实是通过重新设置option时间的,方法与上图完全相同
myChart.setOption(map_option);
下面几张图是回龙观群众在临晨1点~5点按时间轴变化的出行热力图
临晨3点
临晨5点
早晨7点
可以看到上面亮了几个点, 放大地图看看。
发现分别是, 汉王大厦, 融泽嘉园售楼处, 回龙观镇医院。还有一个高速公路收费站口
下面是部分代码。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
</head>
<body style="height: 100%; margin: 0">
<div style ="z-index=999">
<input type="button" value="点击切换到出发热力图" onclick="chg(0)" disabled=disabled ID="startBtn" NAME="Button1">
<input type="button" value="点击切换到到达热力图" onclick="chg(1)" ID="endBtn" NAME="Button1">
</div>
<div>
<div id=mytips style="z-order=999;background-color:#F0F8FF;width:100;height:16;border:2px solid gray;display:none;filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=5);left:5;top:5"></div>
<input type="button" value="点击显示5公里内嘀嘀新客的目的地或者来源" disabled=disabled onclick="showDS()" ID="src_dest_Btn" NAME="Button1">
</div>
<div id="dummy" style ="display:none"></div>
<div id="container" style="height: 100%">
</div>
<!-- 新添加的jQuery -->
<script type="text/javascript" src="./js/jquery-3.1.0.js"></script>
<!-- End -->
<script type="text/javascript" src="./js/echarts.js"></script>
<script type="text/javascript" src="./js/dataTool.js"></script>
<script type="text/javascript" src="./js/bmap.js"></script>
<script type="text/javascript">
var bmap4search= new BMap.Map("dummy");
var localSearch = new BMap.LocalSearch(bmap4search);
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
app.title = '热力图与百度地图扩展';
var startPoints=[];
var endPoints=[];
var dsPoints=[];
var radium=5;
var gc = new BMap.Geocoder();
var map_option;
var map_status="default";//全部乘客的出发或者达到
//$.get('./js/data/bejing_track_end.json', function (data) {
$.get('./js/data/test.txt', function (data) {
var array = data.split('\n');
for(var i in array)
{
if(array[i]!="")
{
eval("temp="+array[i]);
startPoints[i]=[temp.start_location_lng, temp.start_location_lat].concat([1]);
endPoints[i]=[temp.end_location_lng, temp.end_location_lat].concat([1]);
}
}
option_start = {
animation: true,
bmap: {
center: [116.301670, 39.971690],
zoom: 11,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: startPoints,
pointSize: 10,
blurSize: 6
}]
}
option_end = {
animation: true,
bmap: {
center: [116.301670, 39.971690],
zoom: 11,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: endPoints,
pointSize: 10,
blurSize: 6
}]
}
//用来展示5公里范围的人都去到那里, 或者从哪里来的。
option_ds = {
animation: true,
bmap: {
center: [116.301670, 39.971690],
zoom: 11,
roam: true
},
visualMap: {
show: false,
top: 'top',
min: 0,
max: 5,
seriesIndex: 0,
calculable: true,
inRange: {
color: ['blue', 'blue', 'green', 'yellow', 'red']
}
},
series: [{
type: 'heatmap',
coordinateSystem: 'bmap',
data: dsPoints,
pointSize: 10,
blurSize: 6
}]
}
var callback=function(center_point){
option_start.bmap.center = [center_point.lng, center_point.lat];
option_end.bmap.center = [center_point.lng, center_point.lat];
option_ds.bmap.center = [center_point.lng, center_point.lat];
map_option=option_start;
myChart.setOption(map_option);
var bmap = myChart.getModel().getComponent('bmap').getBMap();
bmap.addEventListener("click", function(e){ //鼠标点击事件
var pt = e.point;
if(map_status=="default")
$("#src_dest_Btn").removeAttr("disabled");
else
$("#src_dest_Btn").attr("disabled","disabled");
seashowtip(1, pt.lng,pt.lat);
}
);
if (!app.inNode) {
// 添加百度地图插件
bmap.addControl(new BMap.MapTypeControl());
}
}
searchByStationName("北京",callback);
});
function chg(type)
{
map_status="default";
if(type==0)
{
map_option = option_start;
$("#endBtn").removeAttr("disabled");
$("#startBtn").attr("disabled","disabled");
}else
{
map_option = option_end;
$("#startBtn").removeAttr("disabled");
$("#endBtn").attr("disabled","disabled");
}
$("#src_dest_Btn").attr("disabled","disabled");
myChart.setOption(map_option);
var my_tips=document.all.mytips;
my_tips.style.display="none";
};
function showDS()
{
//显示5公里范围内的新客的目的地或者来源。
if(dsPoints && dsPoints.length>0)
{
map_status="passenger_within5km";
$("#startBtn").removeAttr("disabled");
$("#endBtn").removeAttr("disabled");
option_ds.series[0].data=dsPoints;
map_option=option_ds;
myChart.setOption(map_option);
}
}
function calPopulationAround2(ln, la)
{
var result=[];
var points = map_option.series[0].data;
for(var i in points)
{
var track = points[i];
if(getDistance(track[0],track[1], ln, la)<radium/2)
{
result[index] = track;
index+=1;
}
}
return result;
};
function calPopulationAround(ln, la)
{
//计算5公里内的乘客坐标, 以及他们的来源或者目的地。
if(map_status!="default")
return calPopulationAround2(ln, la);
var result=[];
var points = startPoints;
var ds_points = endPoints;
if(!$("#startBtn").attr("disabled"))
{
points = endPoints;
ds_points=startPoints;
}
dsPoints=[];
var index=0;
for(var i in points)
{
var track = points[i];
if(getDistance(track[0],track[1], ln, la)<radium/2)
{
result[index] = track;
dsPoints[index] = ds_points[i];
index+=1;
}
}
return result;
};
function seashowtip(flag,ln,la){
var my_tips=document.all.mytips;
var points= calPopulationAround(ln,la);
searchByPoint(ln,la, function(result){
var tipsName = ""+result.address+",附近商圈:("+ result.business +"),坐标("+ln+","+la+")周围"+radium+"公里范围内首单人数:"+points.length+"人";
if(flag){
my_tips.innerHTML=tipsName;//为div块上添加内容
my_tips.style.display="";
my_tips.style.width=150;
my_tips.style.zIndex=999;
my_tips.style.display="block";
//my_tips.style.left=event.clientX+10+document.body.scrollLeft;
//my_tips.style.top=event.clientY+document.body.scrollTop;
}else{
my_tips.style.display="none";
}
});
}
function rad(d)
{
return d * Math.PI / 180.0;
}
function getDistance(lng1,lat1, lng2,lat2)
{
radLat1 = rad(lat1);
radLat2 = rad(lat2);
a = radLat1 - radLat2;
b = rad(lng1) - rad(lng2);
s=2*Math.asin(
Math.sqrt(Math.pow(Math.sin(a/2), 2.0)+
Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2), 2.0)));
EARTH_RADIUS = 6378.137;
s = s * EARTH_RADIUS;
s = Math.round(s*10000) / 10000;
return s;
}
function searchByStationName(keyword, cb) {
//var keyword = "石景山区";
//根据地址来查询经纬度。
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
cb(poi.point);
});
localSearch.search(keyword);
}
function searchByPoint(lng,lat, cb)
{//根据经纬度查询地址
var poi= new BMap.Point(lng,lat);
gc.getLocation(poi, function(rs){
cb(rs);
});
}
</script>
</body>
</html>
本地数据库经纬度调用百度地图api在百度地图上显示用啥方案实现的问题。。
百度地图开放API接口,可以将本地的GPS数据,通过百度转换接口,转成百度数据,并标记在地图上,html网页代码中调用javascript,就能实现。。这个我已经实现了。。现在就是不明白:1、本地数据库里的数据,怎么能读取到javasc... 查看详情
高德&百度&腾讯地图公共交通分析
...的公共交通交通出行要求(这里没做路线有效性研究)。百度更贴合出行方式上的用户需求(比如公共交通+打车)高德提供更多公共交通信息(拥挤程度等),填补某些用户考量维度的信息空白。(我真的好爱拥挤程度信息啊... 查看详情
用百度地图api,怎么获取当前我的位置
参考技术A在百度地图的右上角,点击“地图API”。在地图API页面,把鼠标移动到“工具”菜单项,在下拉菜单中选择“坐标拾取工具”。比如在搜索栏输入“百度大厦”点击搜索,就会在地图上出现相应的标记,点击你要找的... 查看详情
百度地图上★号标注的位置是啥含义
百度地图上的两个图标各代表的意思。如下参考:1.打开百度地图,进入当前页面,找到右侧的工具箱,选择第一个工具箱——道路状况(交通灯标识三个点)。2.绿色的道路状况良好。道路显示为绿色,表示当前道路状况良好。从... 查看详情
百度地图api怎样实现拖动标注实时更新位置数据
在百度地图的右上角,点击“地图API”。在地图API页面,把鼠标移动到“工具”菜单项,在下拉菜单中选择“坐标拾取工具”。比如在搜索栏输入“百度大厦”点击搜索,就会在地图上出现相应的标记,点击你要找的某一个,就... 查看详情
百度地图api获取数据(代码片段)
...们的用户基数大,通过用户获取的信息也是巨大的。除了百度提供api,国内提供免费API获取数据的还有很多,包括新浪、豆瓣电影、饿了么、阿里、腾讯等今天使用百度地图API来请求我们想要的数据。第一步.注册百度开发者账... 查看详情
出租车数据分析
出租车数据分析一、实验简介图片来自pixabay.com出租车是我们生活中经常乘坐的一种交通工具,但打车难的问题也限制了我们更好地利用这种交通方式。在哪些地方出租车更容易打到?在什么时候更容易打到出租车?本课程将基... 查看详情
百度地图api如何判断一个坐标属于哪一个行政区
...省的边界坐标,然后在地图上面用不颜色的覆盖物Polygon,百度地图和谷歌地图都有同样的Polygon类。百度地图的API相关Polygon文档在这里:http://dev.baidu.com/wiki/map/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/Polygon谷歌地图API相关Polyg... 查看详情
用手机gps定位获得准确的百度地图经纬度
我们的踩点工作人员一直反应用手机踩回来的gps坐标,在百度地图上偏差非常大,一直怀疑我们的程序有问题;为了处理这个问题,我们做了专项的分析跟踪.结果证实了手机踩点的精度还是非常高的,我们采集了几套数据与一个专用的... 查看详情
百度地图上的两个图标各代表啥意思?
百度地图上的两个图标各代表的意思。如下参考:1.打开百度地图,进入当前页面,找到右侧的工具箱,选择第一个工具箱——道路状况(交通灯标识三个点)。2.绿色的道路状况良好。道路显示为绿色,表示当前道路状况良好。从... 查看详情
在百度地图里面怎么获取线路的经纬度
打开百度地图:打开百度首页——点击地图。2.在百度地图的右上角,点击“地图API”,如图。3.在地图API页面,把鼠标移动到“工具”菜单项,在下拉菜单中选择“坐标拾取工具”,如图所示。4.下图就是地图拾取系统了,相信... 查看详情
transbigdata:一款基于python的超酷炫交通时空大数据工具包(代码片段)
今天分享一次Python交通数据分析与可视化的实战!其中主要是使用TransBigData库快速高效地处理、分析、挖掘出租车GPS数据。所介绍的相关技术开发了Python开源库TransBigData,该库面向交通时空大数据分析不同阶段的处理需... 查看详情
android百度地图例子
由于项目里用到了百度地图,路线规划的标题(比如“M235/362”)在百度地图API里面没有给出来,网上各种搜索都找不到别人发出来的方案,然后就只能自己组织标题了,相信很多人也遇到和我一样的问题&... 查看详情
车联网开发日记5
今天是开发的第五天,我们继续对百度地图的定位和搜索进行开发,深入了解学习百度地图API。在进行地图搜索开发时,要首先实现地图的定位。这就需要将定位所得到的经纬度传递给poi搜索函数。 &nb... 查看详情
广州高清卫星地图用百度卫星地图server下载含标签道路数据叠加可商用
...等打开。一般来说互联网全部的地图浏览站点比如谷歌、百度、必应等站点或软件的地图均仅仅能用于浏览而不可下载。仅仅有利用专业的地图下载工具,通过获取授权进入地图port,才干下载大范围的服务。百度网盘下载:http:... 查看详情
数据可视化大屏百度地图绘制行政区域标注实战案例解析(个性化地图标注视频控件定位检索)(代码片段)
百度地图开发系列目录数据可视化大屏应急管理综合指挥调度系统完整案例详解(PHP-API、Echarts、百度地图)数据可视化大屏百度地图API开发:停车场分布标注和检索静态版百度地图高级开发:map.getDistance计算多... 查看详情
交通时空大数据如何分析,我写了本书!(代码片段)
...空大数据本文将介绍如何使用TransBigData快速高效地处理、分析、挖掘出租车GPS数据。1、TransBigData简介TransBigData是一个为交通时空大数据处理、分析和可视化而开发的Python包。TransBigData为处理常见的交通时空大数据(如出租车... 查看详情
交通时空大数据如何分析,我写了本书!(代码片段)
...空大数据本文将介绍如何使用TransBigData快速高效地处理、分析、挖掘出租车GPS数据。1、TransBigData简介TransBigData是一个为交通时空大数据处理、分析和可视化而开发的Python包。TransBigData为处理常见的交通时空大数据(如出租车... 查看详情