获取json数据后在 地图上打点，根据 json不断移动点的位置
<?php echo <<<_END
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>点标记</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
.marker {
color: #ff6600;
padding: 4px 10px;
border: 1px solid #fff;
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #0066ff;
}
</style>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [126.60580555556, 45.702363888889],
zoom: 13
});
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
}; getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
//alert('Your Json result is: ' + jdata); //you can comment this, i used it to debug
//alert(jdata.data[0].gpsx);
//alert(jdata.data[0].gpsy);
window.i=0;
//addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);
setInterval(function () { addMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000"); }, function(status) { //error detection....
alert('Something went wrong.');
}); // 实例化点标记
function addMarker(v1,v2) { window.i+=10;
marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [v1,v2]
});
marker.setMap(map);
} </script>
</body>
</html> </script>
</body>
</html> _END; ?>
效果图
-----------------------------------------------------------------------更新---------------------------------------------------------
去掉连续显示多个点，每次只显示一个点
<?php
echo<<<_END
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>点标记</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<style>
.marker {
color: #ff6600;
padding: 4px 10px;
border: 1px solid #fff;
white-space: nowrap;
font-size: 12px;
font-family: "";
background-color: #0066ff;
}
</style>
<script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var marker, map = new AMap.Map("container", {
resizeEnable: true,
center: [126.60580555556, 45.702363888889],
zoom: 13
});
var getJSON = function(url) {
return new Promise(function(resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
resolve(xhr.response);
} else {
reject(status);
}
};
xhr.send();
});
}; getJSON('http://web.cellpies.com/api/driving/getVehicleLocationPoints?vehicleDeviceId=0400000000030603&timeType=4&startTime=2017-03-17%2013:00:00&stopTime=2017-03-17%2014:00:00').then(function(jdata) {
addMarker(jdata.data[0].gpsx,jdata.data[0].gpsy);
window.i=1;
//updateMarker(jdata.data[1].gpsx,jdata.data[1].gpsy);
setInterval(function () { updateMarker(jdata.data[window.i].gpsx,jdata.data[window.i].gpsy); },"1000"); }, function(status) { //error detection....
alert('Something went wrong.');
}); // 实例化点标记
function addMarker(v1,v2) { marker = new AMap.Marker({
icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [v1,v2]
});
marker.setMap(map);
}
function updateMarker(v1,v2) {
//在地图上更新标记
// 自定义点标记内容
window.i+=10;
var markerContent = document.createElement("div"); // 点标记中的图标
var markerImg = document.createElement("img");
markerImg.className = "markerlnglat";
markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
markerContent.appendChild(markerImg); // 点标记中的文本
var markerSpan = document.createElement("span");
markerSpan.className = 'marker';
markerSpan.innerHTML = "Hi，我换新装备啦！";
markerContent.appendChild(markerSpan); marker.setContent(markerContent); //更新点标记内容
marker.setPosition([v1,v2]); //更新点标记位置
} </script>
</body>
</html> </script>
</body>
</html> _END;
?>
涉及setInterval传参的问题。
发现用addMarker(jdata.data[i].gpsx,jdata.data[i].gpsy);时程序可正常运行，但是将该函数 放到setInterval中后却出现了问题，可通过闭包解决。
获取json数据后在 地图上打点，根据 json不断移动点的位置的更多相关文章
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
对于问题从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码. 需求:url:链接 par:ID sel:下拉列表选择器 function BuildS ...
- Ajax前台返回JSON数据后再Controller中直接转换成类型使用，后台接收json转成实体的方法
之前写过一篇记录文章,写的是将一个比较复杂的数据结构在前台组合起来后传递到后台. 当时并不太了解@RequestBody,也并没有使用js提供的JSON.stringify()方法 所有都是自己写的, ...
- Ajax（form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传）
form表单文件上传 上菜 file_put.html <form action="" method="post" enctype="multi ...
- Python爬取房产数据，在地图上展现！
小伙伴,我又来了,这次我们写的是用python爬虫爬取乌鲁木齐的房产数据并展示在地图上,地图工具我用的是 BDP个人版-免费在线数据分析软件,数据可视化软件 ,这个可以导入csv或者excel数据. ...
- jquery ajax获取后台数据后无法输出
今天做ajax获取数据,再浏览器的debugger窗口也看到了数据 ajax代码 $('#userSearch').click(function(){ $.get("loadAllUsers ...
- 通过ajax获得json数据后格式的转换
在有些情况下获取到的json数据可能是string类型的,需要把其格式化为json对象才方便解析. a)原生js通过ajax获取到的json 此时返回的数据默认是string型的,所以需要用eval( ...
- bootstrap通过ajax请求JSON数据后填充到模态框
1. JSP页面中准备模态框 <!-- 详细信息模态框(Modal) --> <div> <div class="modal fade" id=& ...
- ajax 发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别? contentType: "application/j ...
- ajax发送json数据时为什么需要设置contentType: "application/json”
1. ajax发送json数据时设置contentType: "application/json”和不设置时到底有什么区别?contentType: "application/js ...
随机推荐
- 英语发音规则---D字母
英语发音规则---D字母 一.总结 一句话总结: 1.D发[d]音? doctor ['dɒktə] n. 医生:博士 bread [bred] n. 面包:生计 hand [hænd] n. 手,手 ...
- C#6.0新增功能
C# 6.0 版本包含许多可提高开发人员工作效率的功能. 此版本中的功能包括: 只读自动属性: 可以创建只能在构造函数中设置的只读自动属性. 自动属性初始值设定项: 可以编写初始化表达式来设置自动属性 ...
- [转]数据库事务中的隔离级别和锁+spring Transactional注解
数据库事务中的隔离级别和锁 数据库事务在后端开发中占非常重要的地位,如何确保数据读取的正确性.安全性也是我们需要研究的问题.ACID首先总结一下数据库事务正确执行的四个要素(ACID): 原子性(At ...
- 硅谷最有名的帮派：如果你不知道PayPal黑帮
paypal 你知道Tesla Motors,LinkedIn,SpaceX,Yelp,Yammer这几家公司的共同点吗?除了他们的市值都超过10亿美金之外,他们的创办人都是Paypal黑帮(Payp ...
- CF1041F Ray in the tube构造_思维
不难发现起点必定是一个点. 每次间隔的距离一定是 2k2^k2k,关键就是要判断两点是否在同一跳跃距离上可被同时覆盖. 我们可以对上边进行 x1≡x_{1}\equivx1≡ x2mod(2∗dx) ...
- [Linux C]系统调用(system call)和库函数调用(Library functions)
Linux 下对文件操作有两种方式:系统调用(system call)和库函数调用(Library functions).系统调用实际上就是指最底层的一个调用,在 linux 程序设计里面就是底层 调 ...
- [置顶]
Elon Musk (伊隆·马斯克)：无限的创想与意志的胜利
Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...
- HTML中使用 js 添加 data-toggle
情况:<li class="active"><a href="#server1" data-toggle="tab"> ...
- js(Mandango:壮汉专用，电影院划位工具)
Mandango:壮汉专用,电影院划位工具 <body onload="initSeats();"> <div style="margin-top:75 ...
- python_形参、实参
#参数:形参.实参'''def display_message(title): print("My favourite book is %s" %title) #return 0 ...